Post
Ask Question

Basic Templating Using Node.js And Express

Previously, we learned how to simply start up with node.js & implement the package manager. At the below link, you will get an overview of starting up NodeJS.

Now, we are going to explore basic single page templating with Angular UI routing.

Flow of the article

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

Let’s get started with a sample application from https://github.com/ShashangkaShekhar/Package-Manager-NodeJS which was created previously.

Creating Layout Page

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

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" ng-app="templatingApp">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  7.     <base href="/">  
  8.   
  9.     <title> </title>  
  10.     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />  
  11.     <meta name="viewport" content="width=device-width" />  
  12.   
  13. </head>  
  14. <body>  
  15.     <!--Main Content-->  
  16.     <ui-view></ui-view>  
  17.   
  18.     <!--Script Section-->  
  19.     <script type="text/javascript" src="/javascripts/angular.min.js"></script>  
  20.     <script type="text/javascript" src="/javascripts/angular-ui-router.min.js"></script>  
  21.     <script type="text/javascript" src="/ngapp.js"></script>  
  22. </body>  
  23. </html>  

Ngapp.js

  1. var templatingApp;  
  2. (  
  3.     function () {  
  4.         'use strict';  
  5.         templatingApp = angular.module('templatingApp', ['ui.router']);  
  6.     }  
  7. )();  

Let’s change the folder structure like in the below screen.

Node.js

Implementing Angular UI Routing

Now, we will create a JS file for routing.

Routing.js

  1. $stateProvider  
  2.     .state('home', {  
  3.         url: '/home',  
  4.         templateUrl: './home/home.html',  
  5.         controller: 'HomeController'  
  6.     })  
  7.     .state('about', {  
  8.         url: '/about',  
  9.         templateUrl: './about/about.html',  
  10.         controller: 'AboutController'  
  11.     });  

Now, we need to create an HTML page with Angular controller.

Node.js

Finally, the routing.

  1. templatingApp.config(function ($locationProvider, $stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {  
  2.     $locationProvider.html5Mode({  
  3.         enabled: true,  
  4.         requireBase: true  
  5.     });  
  6.   
  7.     $urlMatcherFactoryProvider.strictMode(false);  
  8.   
  9.     $stateProvider  
  10.         .state('home', {  
  11.             url: '/home',  
  12.             templateUrl: './home/home.html',  
  13.             controller: 'HomeController'  
  14.         })  
  15.         .state('about', {  
  16.             url: '/about',  
  17.             templateUrl: './about/about.html',  
  18.             controller: 'AboutController'  
  19.         });  
  20.   
  21.     $urlRouterProvider.otherwise('/home');  
  22. });  

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

  1. <script src="/home/home.controller.js"></script>  
  2. <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 will partially call the views to render in the layout page. I just downloaded a sample Template for free.

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

Node.js

CSS Call in our layout page

  1. <!-- Bootstrap core CSS     -->  
  2. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />  
  3. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />  
  4. <!-- Animation library for notifications   -->  
  5. <link href="/stylesheets/animate.min.css" rel="stylesheet" />  
  6. <!--  Paper Dashboard core CSS    -->  
  7. <link href="/stylesheets/paper-dashboard.css" rel="stylesheet" />  
  8.   
  9. <!--  CSS for Demo Purpose, don't include it in your project     -->  
  10. <link href="/stylesheets/demo.css" rel="stylesheet" />  
  11.   
  12. <!--  Fonts and icons     -->  
  13. <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">  
  14. <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>  
  15. <link href="/stylesheets/themify-icons.css" rel="stylesheet">  

Javascript section

  1. <!-- Core JS Files   -->  
  2. <script src="/javascripts/jquery-1.10.2.js" type="text/javascript"></script>  
  3. <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>  
  4. <!-- Checkbox, Radio & Switch Plugins -->  
  5. <script src="/javascripts/bootstrap-checkbox-radio.js" type="text/javascript"></script>  
  6. <!-- Charts Plugin -->  
  7. <script src="/javascripts/chartist.min.js" type="text/javascript"></script>  
  8. <!--  Notifications Plugin    -->  
  9. <script src="/javascripts/bootstrap-notify.js" type="text/javascript"></script>  
  10. <!-- Google Maps Plugin    -->  
  11. <!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>-->  
  12. <!-- Paper Dashboard Core javascript and methods for Demo purpose -->  
  13. <script src="/javascripts/paper-dashboard.js" type="text/javascript"></script>  
  14. <!-- Paper Dashboard DEMO methods, don't include it in your project! -->  
  15. <script src="/javascripts/demo.js" type="text/javascript"></script>  
  16.   
  17. <script type="text/javascript">  
  18.     $(document).ready(function () {  
  19.         //demo.initChartist();  
  20.         $.notify({  
  21.             icon: 'ti-gift',  
  22.             message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project."  
  23.   
  24.         }, {  
  25.                 type: 'success',  
  26.                 timer: 4000  
  27.             });  
  28.   
  29.     });  
  30. </script>  

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

Navigarion Bar

  1. templatingApp.directive("navbarMenu", function () {  
  2.     return {  
  3.         restrict: 'E',  
  4.         templateUrl: 'shared/navbar/nav.html'  
  5.     };  
  6. });  

Side Bar

  1. templatingApp.directive("sidebarMenu", function () {  
  2.     return {  
  3.         restrict: 'E',  
  4.         templateUrl: 'shared/sidebar/menu.html'  
  5.     };  
  6. });  

Next, we will create the views to render those sections in layout page. You can see the partial call in layout page from the below screenshot.

Node.js

Output

Now, let’s run the application.

Node.js

Source Code

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


Similar Articles