Explore the simple application of ui.route in AngularJs-JS Tutorial-php.cn

Explore the simple application of ui.route in AngularJs

高洛峰

Release： 2016-12-06 15:46:54

Original

1303 people have browsed it

html page code

<body ng-app="myApp">
　　<div ui-view></div>
　　<div ui-view="login"></div>
　　<div ui-view="enroll"></div>
</body>

Copy after login

The ui.router.js file that needs to be referenced

<script src="angular-ui-router.js"></script>

Copy after login

app.js

Inject UI-Router as a dependency of the web application into the main program:

url The :url option will specify a URL for the application's state based on the state in which the user is browsing the application (the address displays the link). In this way, the effect of deep linking can be achieved when browsing the application.

var myApp = angular.module(&#39;myApp&#39;, [&#39;ui.router&#39;]);
myApp.config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;, routeConfig]);
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(&#39;&#39;);
$stateProvider.state(&#39;competition&#39;, {
url: &#39;/competition&#39;,
templateUrl: &#39;/competition.html&#39;,
controller: &#39;competitionController&#39;
}).state(&#39;competition.detail&#39;, {
url: &#39;/competition-detail&#39;,
templateUrl: &#39;/competition-detail.html&#39;,
controller: &#39;competitionDetailController&#39;
}).state.(&#39;competition.enrollForm&#39;,{
url: &#39;/competition.enrollForm&#39;,
templateUrl: &#39;competition-enrollFrom.html&#39;,
controller: &#39;enrollFromController&#39;
}).state.(&#39;competition.comments&#39;,{
url: &#39;/competition-comments&#39;,
templateUrl: &#39;competition-comments.html&#39;,
controller: &#39;commentsController&#39;
}).state(&#39;competition.login&#39;,{
url: &#39;/competition-login&#39;,
views: {
&#39;login@&#39;: {
templateUrl: &#39;competition-login.html&#39;,
controller: &#39;loginController&#39;
}
}
}).state(&#39;competition.enroll&#39;,{<br> 　　url: &#39;/competition-enroll&#39;,<br> views: {<br> 　　　　&#39;enroll@&#39;: {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> 　　　　　templateUrl: &#39;competition-enroll.html&#39;,<br></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel">　　　　　　controller: &#39;enrollController&#39;<br></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> })<br></em></em></em></em></em></em></em></em></em><em id="__mceDel">}</em>

Copy after login

It should be noted that: ui.router uses $stateProvider, and ngRoute uses $routeProvider.

$state.go

$state.go(to, [,toParams],[,options])

The formal parameter to is of string type, which must be used. Use "^" or "." to indicate relative paths;

The formal parameter toParams is nullable, and the type is an object;

The formal parameter options is nullable, and the type is an object. The fields include: location is a bool type and the default is true, inherit is a bool type and the default is true, and relative is an object and the default is

$state. $current, notify is bool type and defaults to true, reload is bool type and defaults to false

$state.go('photos.detail')

$state.go('^') to the previous level, such as from photo.detail to photo

$state.go('^.list') to adjacent state, such as from photo.detail to photo.list

$state.go('^.detail.comment') to Grandchild-level state, such as from photo.detail to photo.detial.comment