Injecting Pages into the Main Layout

ng-viewis an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file. In plain words, it takes the file we want based on the route and injects it into our main layout (index.html).

We will add theng-viewcode to our site in thediv#maito tell Angular where to place our rendered pages.

Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.

Let’s look in our Angular file and add to our application. We will be using $routeProvider in Angular to handle our routing. This way, Angular will handle all of the magic required to go get a new file and inject it into our layout.

For linking to pages, we’ll use the #. We don’t want the browser to think we are actually travelling to about.html or home.html

First, we have to create our module and controller in javascript. We will do that now in script.js.script.js.var app = angular.module('shaharma',['ngRoute']);