w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home AngularJS Tutorials

Setting up Navigation to Angular Js Project

Veerappan Vairavan by Veerappan Vairavan
December 17, 2020
in AngularJS Tutorials

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 ?

You might also like

Passing State Parameters

December 17, 2020

Creating the page navigation using states

December 17, 2020

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

Tags: angular jsAngularJS Tutorialslearnnavigationrouterstatetutorialui-router
Previous Post

Using Angular Js $http from custom Service

Next Post

Removing # Tag in the AngularJs Project url

Veerappan Vairavan

Veerappan Vairavan

Related Stories

Passing State Parameters

by Veerappan Vairavan
December 17, 2020

In the last tutorial we have seen a new State but it just navigated us to a new Page with...

Creating the page navigation using states

by Veerappan Vairavan
December 17, 2020

After all the work done in the last two tutorials we are about to do the real stuff which we...

Removing # Tag in the AngularJs Project url

by Veerappan Vairavan
December 17, 2020

In the last tutorial we have seen there happened to be a change in the url. The url changed from...

Using Angular Js $http from custom Service

by Veerappan Vairavan
December 17, 2020

Well before going in to this tutorial I am assuming you are using brackets to run these sample applications. The...

Next Post

Removing # Tag in the AngularJs Project url

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools