[wp_ad_camp_5]
Previously, I wrote about routing using UI-router. This post demonstrates how to programmatically move from one state to another instead of clicking a set of ui-sref links.
Contents
Software Requirements
- Windows 10
- Notepad++ or Brackets
- AngularJS 1.6.2
- UI-Router 0.4.2
- Main HTML must be HTML5-compliant (optional)
UI-Router
Before UI-Router can be used, you have to download it together with the main AngularJS library. Then include them in the main HTML file along with your AngularJS codes.
[wp_ad_camp_1]
Instead of a set of ui-sref links, you’ll have buttons, when clicked, invoke JavaScript functions. These functions are defined in another controller named navByButtonController.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en" data-ng-app="myapp"> <head> <meta charset="utf-8"> <title>Dynamically move between states</title> <meta name="description" content="Dynamically move between states"> <script src="js/angular.min.js"></script> <script src="js/angular-ui-router.min.js"></script> <script src="js/myapp.js"></script> </head> <body> <h1>Watch the content below changes</h1> <div data-ng-controller="navByButtonController"> <button data-ng-click="goHome()">HOME</button> <button data-ng-click="goSecond()">SECOND PAGE</button> </div> <div style="border-style: dotted"> <ui-view></ui-view> </div> </body> </html> |
These functions are defined in another controller named navByButtonController.
1 2 3 4 5 6 7 8 9 10 11 12 | ... // Navigation-by-button controller myapp.controller('navByButtonController', ['$scope', '$log', '$state', function($scope, $log, $state) { $scope.goHome = function() { $state.go('main'); }; $scope.goSecond = function() { $state.go('second'); }; }]); ... |
To move between state, use this:
1 | $state.go('name-of-state'); |
The name-of-state is any value set for the name property of JSON objects passed to $stateProvider.state(json_object);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ... // The "root" or default route uses the content of main.html for display var main = { name: 'main', url: '/', templateUrl: 'pages/main.html', controller: 'mainController' }; // The "second" route uses the content of second.html for display var second = { name: 'second', url: '/second', templateUrl: 'pages/second.html', controller: 'secondController' }; ... |
Define Routes
The next thing to do is to define a number of routes using $stateProvider in the config function in myapp.js.
[wp_ad_camp_2]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ... // Define the routes here myapp.config(function ($stateProvider, $urlRouterProvider) { // The "root" or default route uses the content of main.html for display var main = { name: 'main', url: '/', templateUrl: 'pages/main.html', controller: 'mainController' }; // The "second" route uses the content of second.html for display var second = { name: 'second', url: '/second', templateUrl: 'pages/second.html', controller: 'secondController' }; $stateProvider.state(main); $stateProvider.state(second); // Set the default or initial URL $urlRouterProvider.otherwise("/"); }); ... |
We use $urlRouterProvider to set an initial or default URL.
UI-View Directive
The uiView directive as shown in the code snippet below is where the contents from the templateUrls get displayed per selected route, e.g., '/second'. The section is updated when the route changes.
1 2 3 4 5 6 7 8 9 10 11 12 | ... <body> <h1>Watch the content below changes</h1> <div data-ng-controller="navByButtonController"> <button data-ng-click="goHome()">HOME</button> <button data-ng-click="goSecond()">SECOND PAGE</button> </div> <div style="border-style: dotted"> <ui-view></ui-view> </div> </body> ... |
Testing our SPA
[wp_ad_camp_3]
Download the codes
[wp_ad_camp_4]
https://github.com/Turreta/AngularJS-Routing-Dynamically-with-UI-Router
