Let's Angle To Angular JS: Routing In Angular JS

Routing is like having/viewing an another view(which we need) which is based on the requested URL internally, within a view(current). In simple without any kind of reloading injecting a child page within the parent page. By using this angular ng-routing we can make our application to behave as like single page applications(SPA’s).

Flow of routing / How it process ?:

In the initial step of routing, let us think that we are within a page of type as like below :

As like the above page, whenever user clicks over the Home link or About us link or contact us link, the URL of the concern link should get hit and the data or content of that particular URL will gets rendered in the space which had reserved for it in our current view. Routing in angular js can be done by using the ngRoute module, which will provide us the behavior of the routing(over the URL’s) in angular JS.

Using ngRoute Module :

STEP : 1
To work with this routing module we need to include the CDN or that particular file which was provide by the google. You can find that CDN even below :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

Note : Make sure that while using this CDN or reference file the placing should be below the angular reference file or CDN like below.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

STEP : 2
After setting up the angular and routing references or CDN’s, let go with creation of our angular app. In our app we have to inject the ngRoute module as dependency like below :

 var app=angular.module("app",['ngRoute'])

STEP : 3
Later getting done with creation of the our module from above step, we need to configure the routing.The configuration can be done by using the $routeProvider of anuglar service which we can utilize by the ngRoute module.

 app.config(function ($routeProvider) {  
       $routeProvider  
       .when("/Home", {  
         templateUrl: "Home.html", controller: "ctr1"  
       })  
       .when("/AboutUs", {  
         templateUrl: "AboutUs.html", controller: "ctr2"  
       })  
       .when("/ContactUs", {  
         templateUrl: "ContactUs.html", controller: "ctr3"  
       })  
       .otherwise({ redirectTo: '/NgRouting.html' });  
     });

In the above code, the config function accepts two parameters In the first, we need to inject the $routeProvider service and in the second we need to call the function. When & otherwise : when and otherwise are the functions of the $routeprovide service. Former when, As a first parameter we need to pass the hashed URL path and in the second as an object we need to specify properties or keys like template URL and its controller so that it can access concern models and business logic from the controller later otherwise is used to define the default routing like Home page URL.So, now lets create the controllers as like below : Defining Controllers :

 app.controller("ctr1", ["$scope", function ($scope) {  
       $scope.pagename = "Home Page";  
     }])  
     app.controller("ctr2", ["$scope", function ($scope) {  
       $scope.pagename = "About Us Page";  
     }])  
     app.controller("ctr3", ["$scope", function ($scope) {  
       $scope.pagename = "Contact Us Page";  
     }])

Directive In the above controllers, I had used the model scope variable named “pagename” which is local and unique to all its own controllers. Whenever the page gets loaded it binds all its model values too.
STEP : 4
Here comes the directive ng-view, which is used to load the content provided by the route. Means wherever we initialize the ng-view, at that place our content will gets loaded. The restrict mode of ng-view is “A”,”E” and “M” means it can act like attribute or element or even as a class. For every angular app we can use only one ng-view directive.

 <body ng-app="myApp">  
 <div>  
 <a href="#!Home">Home</a>  
 <a href="#!AboutUs">About Us</a>  
 <a href="#!ContactUs">Contact Us</a>  
 <a href="#">Others</a>  
 </div>  
 <div ng-view>  
 </div>  
 </body>  
 </html>

Our templateurl will bind within the div that where we declared or provided the ng-view directive.Of the whole angular application we are allowed to use only one ng-view.
Result :

I'll provide much more information related to routing in my next articles.

Thank you.

Let's Angle To Angular JS

Pages

Facebook

Friday, 1 December 2017

Routing In Angular JS

3 comments: