Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

28 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
    Replies
    1. Guys try to add cdn link. problem got solved!.....

      Delete
  5. great site for the angular learners

    ReplyDelete
  6. hello sir,
    AngularJs/index.html#!/
    AngularJs/index.html#!/#%2Fgreen

    this kind of error happen in URL when I click to link.
    please help me

    ReplyDelete
    Replies
    1. Hi,
      I also faced the same error.
      Did followed this to get rid of this issue,
      - removed # from leftmenu as below..
      "
      Home
      Courses
      Students
      "
      - added base tag in tag of index page.

      - Enabled 'html5Mode' using $locationProvider service in script.js

      .config(function ($routeProvider, $locationProvider) {
      $routeProvider
      .when("/home", {
      templateUrl: "Templates/Home.htm",
      controller: "homeController"
      })
      .when("/courses", {
      templateUrl: "Templates/Courses.htm",
      controller: "coursesController"
      })
      .when("/students", {
      templateUrl: "Templates/Students.htm",
      controller: "studentsController"
      })

      $locationProvider.html5Mode({ enabled: true
      });
      })



      try this if it works for you as well.

      Thanks,

      Delete
    2. Thanks Bhoopendra. Your Fix worked for me.

      Delete
  7. Hi All,

    Plesae user angular-route.min.js from stable version which is currently 1.2.32 version as latest version is showing compile time errors in eclipse in the Dyanamic Web Application.

    ReplyDelete
  8. Where to add Controllers Name in index.html?

    ReplyDelete
  9. The links were not working for me so I came to know that angular 1.6.1 core and route files have some problem. so here is my JS code to that fixed the links.

    ///

    var app = angular.module('Demo', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider)
    {
    $locationProvider.hashPrefix('');//this helped fix a bug with angular 1.6.1 http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working the routing links were not working but this $locationProvider variable change fixed it.
    $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', 'SQL Server', 'ASP.NET'];
    })
    .controller('studentsController', function ($scope, $http)
    {
    $http.get('Part25StudentService.asmx/GetAllStudents')
    .then(function (response)
    {
    $scope.students = response.data;
    });
    });

    ReplyDelete
    Replies
    1. Thanks AJ, I don't understand it but that got it to work! These videos have been awesome, but I will definitely need more ngRoute examples / practice to get my head around this.

      Delete
    2. This solution worked. Thanks

      Delete
    3. Hi Aj,

      I placed the same code what you are said above, but is not working for me. May i know what is the reason?

      Delete
  10. After reading the post in AJ s comment. Change in Angular 1-6. Either go with AJ's solution - or - make the href in anchor tags '#!/home' instead or '#/home'

    ReplyDelete
    Replies
    1. Thank you , '#!/home' works for me

      Delete
    2. thank you it works for me href="#!/home" for a_tag is correct

      Delete
    3. Thank you , '#!/home' works for me, but don't understand why ?

      Delete
  11. Am did not getting the list of the student when i click the student link the other two links mean home and courses can anyone help me...???

    ReplyDelete
  12. how to remove # tag without using asp bcz this tutorial using asp
    but i want without asp

    ReplyDelete
  13. hello sir,
    AngularJs/index.html#!/
    AngularJs/index.html#!/#%2Fstudents

    I am getting this error please help me i reffered video no 26 route configuration

    ReplyDelete
  14. my problem is solved, i simply added cdn link and problem solved but why we use cdn if we have local script file and if i use local script file it doesn't work. please anybody tell me the reason...

    ReplyDelete
  15. var myApp = angular.module("myModule", ["ngRoute"]).config(function ($routeProvider) {

    $routeProvider.when("/home", { templateURL: "Templates/home.html", controller: "homeController" })
    .when("/courses", { templateURL: "Templates/courses.html",controller:"coursesCountroller" })
    .when("/students", { templateURL: "Templates/students.html", controller: "studentsController" })
    .controller("homeController", function ($scope) {


    $scope.message = "Home Page!!";


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

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

    })
    .controller("studentsController", function ($scope, $http)
    {
    $http.get("StudentService.asmx/StudentData").then(function (response) {

    $scope.students = response.data;


    })


    })

    });


    The links are not getting loaded and I m getting this error:Error: $injector:modulerr
    Module Error
    Failed to instantiate module myModule due to:
    TypeError: $routeProvider.when(...).controller is not a function

    ReplyDelete
  16. Hi in 1.7.x version we are getting this error. Instead refer 1.2.x for both angular.min.js amd angular-route.min.js. Then the navigation works for Home, Courses, Students

    ReplyDelete
  17. Hi Venkat Sir,

    I have implemented the above example only with 2 pages Home and courses as I don't have VS and SQL. I'm getting below error message when I'm clicking on Home or Courses link.

    GET http://127.0.0.1:5500/Templates/home.html 404 (Not Found)
    (anonymous) @ angular.js:13562
    sendReq @ angular.js:13288
    serverRequest @ angular.js:13029
    processQueue @ angular.js:17945
    (anonymous) @ angular.js:17993
    $digest @ angular.js:19112
    $apply @ angular.js:19500
    (anonymous) @ angular.js:15301
    defaultHandlerWrapper @ angular.js:3824
    eventHandler @ angular.js:3812
    angular.js:15567 Error: [$templateRequest:tpload] Failed to load template: Templates/home.html (HTTP status: 404 Not Found)
    https://errors.angularjs.org/1.7.8/$templateRequest/tpload?p0=Templates%2Fhome.html&p1=404&p2=Not%20Found
    at angular.js:138
    at handleError (angular.js:21397)
    at processQueue (angular.js:17945)
    at angular.js:17993
    at Scope.$digest (angular.js:19112)
    at Scope.$apply (angular.js:19500)
    at done (angular.js:13343)
    at completeRequest (angular.js:13600)
    at XMLHttpRequest.requestLoaded (angular.js:13505)
    (anonymous) @ angular.js:15567
    (anonymous) @ angular.js:11846
    handleError @ angular.js:21401
    processQueue @ angular.js:17945
    (anonymous) @ angular.js:17993
    $digest @ angular.js:19112
    $apply @ angular.js:19500
    done @ angular.js:13343
    completeRequest @ angular.js:13600
    requestLoaded @ angular.js:13505
    load (async)
    (anonymous) @ angular.js:13488
    sendReq @ angular.js:13288
    serverRequest @ angular.js:13029
    processQueue @ angular.js:17945
    (anonymous) @ angular.js:17993
    $digest @ angular.js:19112
    $apply @ angular.js:19500
    (anonymous) @ angular.js:15301
    defaultHandlerWrapper @ angular.js:3824
    eventHandler @ angular.js:3812

    Do we really need Visual Studio and web.config file to get this example work.

    Please advise.

    ReplyDelete
  18. Hello friends,

    I'm very late to ask anything on this tutorial and sorry about that. I followed twice this 3 videos but still unable to get the result as I should get it. first of all, json(StudentService.asmx) working absolutely fine. when I'm testing 3 html files separately its not working, I mean it is not displaying the either course data nor student data. The same way index.html file is also not displaying anything when click on home, course, student links.

    Any help would be much appreciated.

    ReplyDelete

It would be great if you can help share these free resources