Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Angularjs route configuration

Suggested Videos
Part 23 - Angularjs routing tutorial
Part 24 - Angular layout template
Part 25 - Angularjs partial templates



In this video we will discuss configuring routes and creating controllers. This is continuation to Part 25. Please watch Part 25 from AngularJS tutorial



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.
<script src="Scripts/script.js"></script>

2. Set ng-app="Demo" on the root html element
<html xmlns="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.

Next video : How to remove hash from URL

AngularJS tutorial for beginners

5 comments:

  1. Simple and easy way approach for learning trending technologies like Angularjs... Thank you for providing us a learning tutorails...

    ReplyDelete
  2. Had one query. Due to routeProvider it is not required to define controller in html?

    ReplyDelete
  3. 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!

    ReplyDelete
  4. i have done this example form video 23-25 after execution navigation are not working then template is not loading. can any one help in this.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.