This article describes the usage of the AngularJS routing Ui-router module. Share it for your reference, as follows:
Due to some design reasons, AngularJS native routing module has some shortcomings, such as not supporting view nesting, so many communities have begun to design their own routing modules, the most representative one is ui-route.
ui-route is a powerful routing module that enhances other functions on the native ng-route module.
Now let’s start doing a few DEMOs and get in touch with ui-route.
<!--Initial page--> <!doctype html> <meta charset="UTF-8"> <html> <head> <link href="" rel="external nofollow" rel="stylesheet"> </head> <body > <div ng-app="myApp"> <div><a ui-sref = "index">front page</a></div> <div ui-view></div><!--This is where the routing view is stored--> </div> <script src=""></script> <script src=""></script> <script src=""></script> </body> </html>
First, the file must be referenced. This file is different from AngularJs files. And the file must be placed below.
After observing the body code of Html, you can find that there are three different places than the body code when using native ng-route. They are ui-sref, index and ui-view. Skip first and see how to initialize the ui-route module.
Initialize the ui-route module:
var app = ('myApp',['']);
(["$stateProvider",function($stateProvider){
$stateProvider
.state("index",{
url:'/',
template:'<div>I am home page content</div>'
})
}]);
First of all, similar to the native ng-route routing module, ui-route must be injected first. Then make specific configurations. Unlike the native ng-route, ui-route uses state() instead of the native when(). It adds a new parameter to when(). Here is the index to distinguish which command this part of the route responds to.
Go back to the previous <div><a ui-sref = "index">home page</a></div>, and you will probably know the relationship between their view and it. ui-view replaces the previous ng-view, ui-sref replaces the previous ng-href, and it no longer points to the link, but to the name of "navigation".
The url attribute can uniquely identify the subsequent address of the route and be used to distinguish it from the subsequent routes.
For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.