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

14 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. 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
  6. 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
  7. Where to add Controllers Name in index.html?

    ReplyDelete
  8. 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
  9. 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

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.