Angular JS Routing using UI-Router

Submitted by nurhodelta_17 on Sunday, January 14, 2018 - 21:08.

Getting Started

I've used CDN for Bootstrap, Angular JS and UI-Router so you need internet connection for them to work.

Why choose ui-router rather than angular-route?

You can visit this page if you want a more detailed instruction on the difference of the two but to sum up, ui-router can provide nested views and multiple views.

index.html

This is the main page of our app.
  1. <!DOCTYPE html>
  4.         <title>Angular JS Routing using UI-Router</title>
  5.         <meta charset="utf-8">
  6.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  8.         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  9. </head>
  10. <body ng-app="app">
  11. <nav class="navbar navbar-default">
  12.         <div class="container">
  13.             <div class="navbar-header">
  14.                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  15.                         <span class="sr-only">Toggle navigation</span>
  16.                         <span class="icon-bar"></span>
  17.                         <span class="icon-bar"></span>
  18.                         <span class="icon-bar"></span>
  19.                     </button>
  20.                 <a class="navbar-brand" ui-sref="#">SourceCodeSter</a>
  21.             </div>
  22.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  23.                 <ul class="nav navbar-nav">
  24.                         <li><a ui-sref="home">Home</a></li>
  25.                         <li><a ui-sref="about">About</a></li>
  26.                         <li><a ui-sref="blog">Blog</a></li>
  27.                 </ul>
  28.             </div>
  29.         </div>
  30. </nav>
  31. <div class="container">
  32.         <div ui-view></div>
  33.         <div class="row">
  34.                 <div class="text-center">
  35.                         <p>A tutorial by <a href="https://www.sourcecodester.com/users/nurhodelta2017">nurhodelta_17</a></p>
  36.                         <p>For more tutorials, visit <a href="https://www.sourcecodester.com">SourceCodeSter</a></p>
  37.                 </div>
  38.         </div>
  39. </div>
  40. <script src="js/app.js"></script>
  41. <script src="js/controllers/movieController.js"></script>
  42. <script src="js/controllers/dataController.js"></script>
  43. <script src="js/controllers/blogController.js"></script>
  44. </body>
  45. </html>

app.js

This is the main angular js script of our app.
  1. var app = angular.module('app', ['ui.router']);
  2.  
  3. app.config(function($stateProvider, $urlRouterProvider) {
  4.    
  5.     $urlRouterProvider.otherwise('/home');
  6.    
  7.     $stateProvider
  8.        
  9.         // HOME STATES AND NESTED VIEWS
  10.         .state('home', {
  11.             url: '/home',
  12.             templateUrl: 'partials/home.html'
  13.         })
  14.        
  15.         // nested with custom controller
  16.         .state('home.anime', {
  17.             url: '/anime',
  18.             templateUrl: 'partials/anime.html',
  19.             controller: function($scope) {
  20.                 $scope.animes = ['Shokugeki no Soma', 'Haikyuu', 'Nanatsu no Tazai', 'Asterisk'];
  21.             }
  22.         })
  23.        
  24.         // nested with external controller
  25.         .state('home.movie', {
  26.             url: '/movie',
  27.             templateUrl: 'partials/movie.html',
  28.             controller: 'movieCtrl'
  29.         })
  30.  
  31.         // nested with string data
  32.         .state('home.quote', {
  33.             url: '/quote',
  34.             template: 'Chance favors the prepared mind',
  35.            
  36.         })
  37.        
  38.         // ABOUT PAGE AND MULTIPLE NAMED VIEWS
  39.         .state('about', {
  40.             url: '/about',
  41.             views: {
  42.                 '': { templateUrl: 'partials/about.html' },
  43.                 'firstColumn@about': { template: 'This is the first column!' },
  44.                 'secondColumn@about': {
  45.                     templateUrl: 'partials/second_table.html',
  46.                     controller: 'dataCtrl'
  47.                 }
  48.             }
  49.            
  50.         })
  51.  
  52.         // SIMPLE PAGE
  53.         .state('blog', {
  54.             url: '/blog',
  55.             templateUrl: 'partials/blog.html',
  56.             controller: 'blogCtrl'
  57.         });
  58.        
  59. });

movieController.js

This is the controller for our movie.html
  1. 'use strict';
  2.  
  3. app.controller('movieCtrl', function($scope) {
  4.     $scope.movies = ['Marvels Movies', 'DC Movies', 'Science Fiction', 'Detective Movies'];
  5. });

dataController.js

This is the controller for our second_table.html
  1. 'use strict';
  2.  
  3. app.controller('dataCtrl', function($scope) {
  4.     $scope.friends = [
  5.         {
  6.             firstname: 'Gemalyn',
  7.             lastname: 'Cepe'
  8.         },
  9.         {
  10.             firstname: 'Julyn',
  11.             lastname: 'Divinagracia'
  12.         },
  13.         {
  14.             firstname: 'Rupert',
  15.             lastname: 'Dikoalam'
  16.         }
  17.     ];
  18. });

blogController.js

This is the controller for our blog.html
  1. 'use strict';
  2.  
  3. app.controller('blogCtrl', function($scope) {
  4.     $scope.blogs = [
  5.         {
  6.             title: 'Angular JS Crud Operation',
  7.             link: 'https://www.sourcecodester.com/php/11909/angularjs-crud-search-sort-and-pagination-phpmysqli.html'
  8.         },
  9.         {
  10.             title: 'Angular JS Progress Bar',
  11.             link: 'https://www.sourcecodester.com/tutorials/javascript/11928/angularjs-progress-bar-phpmysqli.html'
  12.         },
  13.         {
  14.             title: 'Angualr JS Deleting Multiple Rows',
  15.             link: 'https://www.sourcecodester.com/tutorials/javascript/11929/angularjs-delete-multiple-rows-using-phpmysqli.html'
  16.         }
  17.     ];
  18. });

home.html

As per app.js script code, this is treated as our index page.
  1. <div class="jumbotron text-center">
  2.     <h1>This the Home Page</h1>
  3.     <p>In this page is an example of <span class="text-danger">nested</span> views.</p>
  4.  
  5.     <div class="text-center">
  6.             <h3>My Favorites</h3>
  7.         </div>
  8.     <a ui-sref=".anime" >Anime</a> ||
  9.     <a ui-sref=".movie" >Movie</a> ||
  10.     <a ui-sref=".quote">Quote</a>
  11. </div>
  12.  
  13. <div ui-view>This will be overwritten by nested views</div>

anime.html

This is one of the nested views.
  1. <ul>
  2.         <li ng-repeat="anime in animes">{{ anime }}</li>
  3. </ul>

movie.html

This is the other nested view.
  1. <ul>
  2.         <li ng-repeat="movie in movies">{{ movie }}</li>
  3. </ul>

about.html

This is our about page that contains multiple views.
  1. <div class="jumbotron text-center">
  2.     <h1>The About Page</h1>
  3.     <p>In this page is an example of <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
  4. </div>
  5.  
  6. <div class="row">
  7.     <div class="col-sm-6">
  8.         <h3>First Column</h3>
  9.         <div ui-view="firstColumn"></div>
  10.     </div>
  11.     <div class="col-sm-6">
  12.         <h3>Second Column</h3>
  13.         <div ui-view="secondColumn"></div>
  14.     </div>
  15. </div>

second_table.html

This is one of the multiple views.
  1. <table class="table table-striped table-bordered">
  2.     <thead>
  3.         <tr>
  4.             <th>Firstname</th>
  5.             <th>Lastname</th>
  6.         </tr>
  7.     </thead>
  8.     <tbody>
  9.         <tr ng-repeat="friend in friends">
  10.             <td>{{ friend.firstname }}</td>
  11.             <td>${{ friend.lastname }}</td>
  12.         </tr>
  13.     </tbody>

blog.html

Lastly, this is our blog page that contains a simple view.
  1. <div class="jumbotron text-center">
  2.     <h1>The Blog Page</h1>
  3.     <p>In this page is an example of a Simple Route</p>
  4. </div>
  5.  
  6. <div class="row">
  7.     <div class="col-xs-4 col-xs-offset-4">
  8.         <table class="table table-striped table-bordered">
  9.             <thead>
  10.                 <tr>
  11.                     <th>Title</th>
  12.                 </tr>
  13.             </thead>
  14.             <tbody>
  15.                 <tr ng-repeat="blog in blogs">
  16.                     <td><a href="{{ blog.link }}">{{ blog.title }}</a></td>
  17.                 </tr>
  18.             </tbody>
  19.         </table>
  20.     </div>
  21. </div>
That ends this tutorial. Happy Coding :)
Tags
angular js
ui-router
$stateProvider
$urlRouterProvider
nested view
multiple view