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.

<!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>
<ui-view></ui-view>
<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 in the below screen.

Node.js

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 an HTML page with Angular controller.

Node.js

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 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

<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" />
<link href="/stylesheets/animate.min.css" rel="stylesheet" />
<link href="/stylesheets/paper-dashboard.css" rel="stylesheet" />
<link href="/stylesheets/demo.css" rel="stylesheet" />
<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

<script src="/javascripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap-checkbox-radio.js" type="text/javascript"></script>
<script src="/javascripts/chartist.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap-notify.js" type="text/javascript"></script>
<script src="/javascripts/paper-dashboard.js" type="text/javascript"></script>
<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 a 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 sections in layout page. You can see the partial call in layout page from the below screenshot.

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