Setting up Navigation to Angular Js Project

Angular is mostly used for SPA (Single Page Application) but still every app requires some kind of navigation from one view to other view. Take our very own application here we navigate now on click of click of the images we populate the description on the right hand side. What if I need a button in the right hand side labeled “More” and on click of the “More” I need to go to a different view/page completely without hiding or showing something. Does Angular has any tricks up in the sleeves?

You are right, Angular provides an inbuilt functionality called ng-route which will allow the application state’s from one to other state. But most people use one third party routing library called ui-router. Do you have any idea why developers ignore an inbuilt and uses a third party just for this navigation/routing ?

I am sure there is a very good reason behind it. One very valid reason I can give you right way is ng-Route won’t support nested views where in ui-route supports nested Views. You can check on internet for all the differences between ui-route and ng-route.

What is a Nested Views?

In short you have landing page and now we are going to have one more page on click of “More”. On click of “More” is going to take us to an entirely new state which is common between ng-route and ui-route but what if the new state has two divs which are considered as sub sections and this will also change partially inside the same state. This is called the nested state. A state can contain multiple nested states which will get dynamically loaded based on the configuration you make while setting up the ui-route.

Cool lets set up ui-route for our application and start navigating to pages.

• First we need to download the ui-router library from the link and copy the contents in your lib folder of your application.
• Now include your new file placed under lib as a reference in your index.html

  <script src="js/lib/ui-router.js"></script>

• Now add the dependency of ui-router to our angular app.
  var app = angular.module(“appViewer”,[‘ui.router’]); // mainController.js
• We need to add a config block to our app to set up the states. Config blocks will load right after the angular module loads and the states will get registered before the $compile service runs.

  app.config(function($stateProvider){    $stateProvider         .state('home',{             url:'/',             templateUrl: '/templates/home.html'         }) });

• Move the below contents from index.html to a new file called home.html created under templates folder.
  home.html

  <div  style="float:left;margin-right:10px">      <car-details ng-repeat="car in cars" src="{{car.url}}"  title="{{car.name}}" ng-click="onSelect($index)"></car-details> </div> <div>     {{desc}} </div>

• In place of this code in index.html simply add this directive <ui-view></ui-view>

Great now you have successfully set up the ui-route and it’s up and running except the fact that we have moved most of the code from index.html in to a new file called home.html. If you run the application now you will be seeing the exact output which you have seen in the last tutorial but there is one small change in your url.

Instead of this usual url http://127.0.0.1:58586/index.html you need to hit http://127.0.0.1:58586/index.html#/

I can understand this # is frustrating in many ways from SEO to a normal user who always forgets to include the #/ which results in no show of the app. There are some ways you can remove the # tag from the url which we will be seeing in the next tutorial.

Download Demo