Post
Ask Question

New Angular Router- ngNewRouter

Routing is a great feature that is useful in designing SPA (Single Page Application) in angular js. In SPA application, all views are different view pages and we use Routing to load this different content to a specified part of the application.

For routing in earlier version we were using ng-route or ui-route in angular version. In 1.4 onwards angular team came up with the concept of component based web applications and component based routing which will be reusable and loosely coupled components keeping in thought that components are fundamental building blocks of the modern web. The angular higher versions now focus on directives, components and components communicate with directives by using properties, events or methods. Angular higher version will not use $scope object anymore in the controllers rather all the scope information will be in directive.

Consider a page wherein we have different Tabs, such as news, stock, whether, stocks. On click of each tab we will load different views.

roughting

To do this we need to write this code in Index.html using new ng router

  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <style type="text/css">  
  5.         .tab  
  6.         {  
  7.             display: inline;  
  8.             border-top: .1em solid #03c;  
  9.             border-left: .1em solid #03c;  
  10.             border-right: .1em solid #03c;  
  11.             text-decoration: none;  
  12.             color: #000;  
  13.             padding: 0.25em 1em;  
  14.             background-color: #03c;  
  15.             color: #fff;  
  16.         }  
  17.     </style>  
  18.     <title>Routing in Angular Js Page</title>  
  19.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  20.     <script src="js/angular-1.4.0-beta.6.js"></script>  
  21.     <script src="js/router.es5.js"></script>  
  22. </head>  
  23. <body ng-controller="ComponentController">  
  24.     <h1>  
  25.     Component Wise Routing in Angular Js</h1>  
  26.     <a ng-link="news()" class="tab">News</a>   
  27.     <a ng-link="stock()" class="tab">Stock</a>  
  28.     <a ng-link="weather()" class="tab">Weather</a>   
  29.     <a ng-link="sports()" class="tab">Sports</a>  
  30.     <div ng-viewport>  
  31.     </div>  
  32.     <script>  
  33.         var module = angular.module("myApp", ["ngNewRouter", "myApp.news", "myApp.stock", "myApp.weather", "myApp.sports"]);  
  34.         module.controller("ComponentController", function ($scope, $router) {  
  35.   
  36.             $router.config([  
  37.                     { path: "/", redirectTo:"news" },  
  38.                     { path: "/stock", component: "stock" },  
  39.                     { path: "/weather", component: "weather" },  
  40.                     { path: "/sports", component: "sports" }  
  41.                 ]);  
  42.         });  
  43.     </script>  
  44.     <script src="components/news/news.js"></script>  
  45.     <script src="components/stock/stock.js"></script>  
  46.     <script src="components/weather/weather.js"></script>  
  47.     <script src="components/sports/sports.js"></script>  
  48. </body>  
  49. </html>  
  50.   
  51.   
  52. Designing the components   
  53. News.js  
  54. angular.module("myApp.news", []).controller("NewsController", NewsController);  
  55.   
  56. function NewsController() {  
  57.     this.title = "This is from News View";  
  58. }  
There are four main elements of component based routing:

ng-link

It is used to keep all the link elements
  1. <a ng-link="stock()" class="tab">Stock</a>  
  2.     <a ng-link="weather()" class="tab">Weather</a>   
  3.     <a ng-link="sports()" class="tab">Sports</a>  
ng-viewport

In order to inject an HTML template known as component into a web page, we need to create a container/placeholder div for it. This div should have an Angular directive ng-viewport. This ng-viewport is like ng-view/ui-view from Angular UI router and AngularJS core functionality. The directive ng-viewport can be used any number of times inside an application.

  1. <div ng-viewport>  
  2.   
  3. </div>  

ngNewRouter

It is used to make deep linking URLs between controllers and view.

Component

This is Angular service which allows us to retrieve the current set of route parameters.Componet looks for components folder inside the project structure.

Configuring routes, for routing the paths we should write as below:

  1. var module = angular.module("myApp", ["ngNewRouter", "myApp.news", "myApp.stock", "myApp.weather", "myApp.sports"]);  
  2. module.controller("ComponentController", function ($scope, $router)  
  3. {  
  4.     $router.config([  
  5.     {  
  6.         path: "/",  
  7.         component: "news"  
  8.     },  
  9.     {  
  10.         path: "/stock",  
  11.         component: "stock"  
  12.     },  
  13.     {  
  14.         path: "/weather",  
  15.         component: "weather"  
  16.     },  
  17.     {  
  18.         path: "/sports",  
  19.         component: "sports"  
  20.     }]);  
  21. });  

Here in { path: "/", component:"news" }, we should keep the folder components and inside components we will put news folder. News folder will contain the html and controller code for this view only.



This is all about ngNewRouter in AngularJS. Thanks for reading.  


Similar Articles