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 https://github.com/ShashangkaShekhar/Package-Manager-NodeJS 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">
<head>
    <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" />

</head>
<body>
    <!--Main Content-->
    <ui-view></ui-view>

    <!--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>
</body>
</html>

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.

<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="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,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="https://maps.googleapis.com/maps/api/js"></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 () {
        //demo.initChartist();
        $.notify({
            icon: 'ti-gift',
            message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project."

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

    });
</script>

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 @github, Hope this will help 🙂

SHASHANGKA SHEKHAR'S BLOG

Author: Shashangka Shekhar

Leave a Reply Cancel reply