Home > Developer > JavaScript
AngularJS ui-router (nested Routing) instance, angularjsui-router
We all know that if native routing is used, Angular views are loaded using the ng-view command. For example, <div ng-view> </div>. In general, we will put this directive in the file index.html, and then load the corresponding template view through the Controller. For example:
var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.config(function($routeProvider) { $routeProvider.when('/hello', { templateUrl: 'tpls/hello.html', controller: 'HelloCtrl' }).when('/list', { templateUrl: 'tpls/bookList.html', controller: 'BookListCtrl' }).otherwise({ redirectTo: '/hello' }) });
This is the native routing definition of AngularJS. On the surface, it seems quite convenient and there is no big problem. However, if we have a webpage, the menu bar is on the left and the view corresponding to each menu is on the right. If you click each menu item according to this definition, do you have to refresh the entire webpage? All we want is to refresh the view on the right. Therefore, nested routing is required.
The so-called nested routing means that the view can also be nested, and the route can also be nested. In addition, you can use ui-router to transmit parameters between different views.
When the ui-router defines a route, it is used differently from the ngRouter. in the html Tag, ui-view is used instead of ng-view, for example, <div ui-view> </div>. Ui-router provides $ stateProvider and $ urlRouterProvider for routing definition.
The following example shows how to implement route nesting:
Home.html
Create the following html page:
<div class="jumbotron text-center">Home-list.html
Create the following html page:
<ul> <li ng-repeat="topic in topics">{{ topic }}</li> </ul>About.html
Create the following html page:
<div class="jumbotron text-center">Table-data.html
Create the following html page:
Note: so far, we have not inserted any AngularJS routing or any other framework. Currently, we only create some page fragments. We need a placeholder or parent page to hold these page fragments. Let's call this page index.html.
Index.html
Use the following content to create this html page
<!doctype html>On the home page we introduced angular. min. js, angular-ui-router.js, angular-animate.js, and app. js. In the div whose class is iner, we create a <div ui-view = ""> </div>. The HTML content in the div changes according to the route. In <a ui-sref = "home"> </a>, the ui-sref command is linked to a specific status.
In the content of the app. JS file, we declare the AngularJS module and routing configuration. When the page appears, the contents of home.html will be displayed in index.html. The Code is as follows:
Var routerApp = angular. module ('routerapp', ['ui. router ']); routerApp. config (function ($ stateProvider, $ urlRouterProvider) {/* Route redirection $ urlRouterProvider: If no routing engine matches the current navigation status, It routes the path to home.html by default, * This page is where the status name is declared. */$ urlRouterProvider. otherwise ('/home'); $ stateProvider. state ('home', {url: '/home', templateUrl: 'tpls2/home.html'})/* nested list with custom controller */. state ('home. list', {url: '/list', templateUrl: 'tpls2/home-list.html', controller: function ($ scope) {$ scope. topics = ['butterscotch', 'black Stream', 'mango'] ;}}) // nested list with just some random string data. state ('home. paragraph ', {url:'/paragraph ', template:' I could use a scoop of ice-cream. '}). state ('about', {url: '/about',/* When a view has multiple ui-views in this state, you can use specific templates, controllers, and resolve data for different ui-views to use the '@' symbol to differentiate them, for example, 'columnone @ about' indicates that the ui-view named 'columnone' uses the 'About' template, but does not have a relative view */views: {// unknown view '': {templateUrl: 'tpls2/about.html '}, // for" ui-view = 'columnone' "'columnone @ about': {template: 'Here is the content of the first column'}, // for "ui-view = 'columntwo'" 'columntwo @ about': {templateUrl: 'tpls2/table-data.html ', controller: 'controller' }}) ;}); routerApp. controller ('controller', function ($ scope) {$ scope. message = 'test'; $ scope. topics = [{name: 'butterscotch', price: 50}, {name: 'black Stream', price: 100}, {name: 'mango ', price: 20}] ;});
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
