Basic Templating NodeJS

Previously we learnt about how to simply starting up with nodejs & implementing package manager. Below link you can have an overview on startup NodeJS.

Now we are going to explore basic single page templating with angular ui routing.

Table of Content:

  • Creating Layout Page
  • Implementing Angular UI Routing
  • Using Partial Views

Let’s get started with sample application from which was created previously.

 Creating Layout Page

Let’s create html page naming it ‘layout.html’. Copy below code snippet and paste it to newly created html page.

<!DOCTYPE html>

<html lang="en" ng-app="templatingApp">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <base href="/">

    <title> </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <!--Main Content-->

    <!--Script Section-->
    <script type="text/javascript" src="/javascripts/angular.min.js"></script>
    <script type="text/javascript" src="/javascripts/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="/ngapp.js"></script>


var templatingApp;
    function () {
        'use strict';
        templatingApp = angular.module('templatingApp', ['ui.router']);

Let’s change the folder structure like below screen.

Implementing Angular UI Routing: Now we will create a JS file for routing.


    .state('home', {
        url: '/home',
        templateUrl: './home/home.html',
        controller: 'HomeController'
    .state('about', {
        url: '/about',
        templateUrl: './about/about.html',
        controller: 'AboutController'

Now we need to create html page with angular controller.

Finally the routing

templatingApp.config(function ($locationProvider, $stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
        enabled: true,
        requireBase: true


        .state('home', {
            url: '/home',
            templateUrl: './home/home.html',
            controller: 'HomeController'
        .state('about', {
            url: '/about',
            templateUrl: './about/about.html',
            controller: 'AboutController'


We also need to add the references of the controller in our layout page.

<script src="/home/home.controller.js"></script>
<script src="/about/about.controller.js"></script>

Using Partial Views

In this portion we are going to implement a sample template to our application then we partially call the views to render in the layout page. I just download a sample Template for free.

First I just copied all the required static file from the template to public folder in our application.

CSS Call in our layout page

<!-- Bootstrap core CSS     -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications   -->
<link href="/stylesheets/animate.min.css" rel="stylesheet" />
<!--  Paper Dashboard core CSS    -->
<link href="/stylesheets/paper-dashboard.css" rel="stylesheet" />

<!--  CSS for Demo Purpose, don't include it in your project     -->
<link href="/stylesheets/demo.css" rel="stylesheet" />

<!--  Fonts and icons     -->
<link href="" rel="stylesheet">
<link href=',300' rel='stylesheet' type='text/css'>
<link href="/stylesheets/themify-icons.css" rel="stylesheet">

Javascript section

<!-- Core JS Files   -->
<script src="/javascripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="/javascripts/bootstrap-checkbox-radio.js" type="text/javascript"></script>
<!-- Charts Plugin -->
<script src="/javascripts/chartist.min.js" type="text/javascript"></script>
<!--  Notifications Plugin    -->
<script src="/javascripts/bootstrap-notify.js" type="text/javascript"></script>
<!-- Google Maps Plugin    -->
<!--<script type="text/javascript" src=""></script>-->
<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="/javascripts/paper-dashboard.js" type="text/javascript"></script>
<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="/javascripts/demo.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
            icon: 'ti-gift',
            message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project."

        }, {
                type: 'success',
                timer: 4000


Now we will create directive for navigation bar & side bar partial view.

Navigarion Bar

templatingApp.directive("navbarMenu", function () {
    return {
        restrict: 'E',
        templateUrl: 'shared/navbar/nav.html'

Side Bar

templatingApp.directive("sidebarMenu", function () {
    return {
        restrict: 'E',
        templateUrl: 'shared/sidebar/menu.html'

Next we will create the views to render those section in layout page. As you can see the partial call in layout page from below screenshot.



Now let’s run the application.

 Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂


Since March 2011, have 8+ years of professional experience on software development, currently working as Senior Software Engineer at s3 Innovate Pte Ltd.

Leave a Reply

Your email address will not be published.