Saturday, 22 December 2018

How to use routing in AngularJS


AngularJS Routing

AngularJS Routing helps to you to create a Single Page Application. ngRoute module helps you to navigate to different pages in your application with no page reloading and Also helps to create the application to be a Single Page Application.

To enable AngularJS Routing, you must include the AngularJS Route module (angular-route.js)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> 
After adding angular-route.js reference, you must specify the ngRoute as a dependency in the application module as below:

var myApp = angular.module("myApp", ["ngRoute"]);

Now your application can use route module.
To configure different routes in your application, you will use the $routeProvider.
You can do with $routeProvider

  • You can specify what page to display when a user clicks a link
  • You can define a controller for each "view"
  • You can use the template that allows you to write HTML directly as value
  • You can set default route using otherwise method, if there is no route match.

var myApp = angular.module("myApp", ["ngRoute"]);
    myApp.config(function ($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl: "Home.htm"
        })
        .when("/about", {
            templateUrl: "about.htm"
        })
        .when("/contact", {
            templateUrl: "contact.htm"
        })
        .when("/blog", {
            templateUrl: "blog.htm",
            controller: "blogController"
        })
        .otherwise({
            template: "<h1>None</h1><p>default routing</p>"
        });
    });
    myApp.controller("blogController", function ($scope) {
        $scope.msg = "www.code-view.com";
    });


You need to define a container to show the views or html template provided by the routing
ngView directive is used to show the views or html template in the defined routes

You can include the ng-view directive in three ways in your application
<ng-view></ng-view>
<div ng-view></div>
<div class="ng-view"></div>

Example:-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<p>
<a href="#/!">Home</a> |
<a href="#!about">About</a> |
<a href="#!contact">Contact</a> |
<a href="#!blog">Blog</a>
</p>

<div ng-view></div>

<script>
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "Home.htm"
    })
    .when("/about", {
        templateUrl : "about.htm"
    })
    .when("/contact", {
        templateUrl : "contact.htm"
    })
    .when("/blog", {
        templateUrl : "blog.htm",
        controller : "blogController"
    })
    .otherwise({
        template : "<h1>None</h1><p>default routing</p>"
    });
});
myApp.controller("blogController", function ($scope) {
    $scope.msg = "www.code-view.com";
});
</script>
</body>
</html>