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

• Startup NodeJS
• Package Manager 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.

Ngapp.js

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.

Routing.js

$stateProvider
    .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) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: true
    });

    $urlMatcherFactoryProvider.strictMode(false);

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: './home/home.html',
            controller: 'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: './about/about.html',
            controller: 'AboutController'
        });

    $urlRouterProvider.otherwise('/home');
});

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

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

Javascript section

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.

 

OutPut:

Now let’s run the application.

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