SHASHANGKA SHEKHAR'S BLOG

Author, TechWriter

Basic Templating NodeJS

Hits: 37

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.

Ngapp.js

Let’s change the folder structure like below screen.

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

Routing.js

Now we need to create html page with angular controller.

Finally the routing

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

Side Bar

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 🙂

Post a comment