Right click on the Scripts folder and add a new JavaScript file. Name it script.js. Copy and paste the following code.

///
<reference path="angular.min.js" />

var app = angular

.module("Demo", ["ngRoute"])

.config(function ($routeProvider) {

$routeProvider

.when("/home", {

templateUrl: "Templates/home.html",

controller: "homeController"

})

.when("/courses", {

templateUrl: "Templates/courses.html",

controller: "coursesController"

})

.when("/students", {

templateUrl: "Templates/students.html",

controller: "studentsController"

})

})

.controller("homeController",
function
($scope) {

$scope.message = "Home Page";

})

.controller("coursesController", function ($scope) {

$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server"];

})

.controller("studentsController", function ($scope, $http) {

$http.get("StudentService.asmx/GetAllStudents")

.then(function (response) {

$scope.students = response.data;

})

})

2 Changes to index.html

1. Add a reference to the script.js file in the layout template i.e index.html.

<scriptsrc="Scripts/script.js"></script>

2. Set ng-app="Demo" on the root html element

<htmlxmlns="http://www.w3.org/1999/xhtml"ng-app="Demo">

At this point, depending on the URL, the respective partial template will be injected into the layout template in the location where we have ng-view directive. For example if you have index.html#/home, then home.html is injected into index.html. Similarly if you are on index.html#/courses, then course.html is injected into index.html.

Hello, great videos - really helpful, but I have a problem, I use VS2015 professional with resharper 10 (if I remember correctly for it) and on the links section I get (with resharper on) id cannot be resolved ( Home for example) and then, when I turn off the resharper I do not get the message anymore, bu I cannot see the partial template either... :< Can someone please help me with this, because these are cool tutorials. :) Great work man!﻿