Home > Article > Web Front-end > Explore the simple application of ui.route in AngularJs

Explore the simple application of ui.route in AngularJs

高洛峰Original: 2016-12-06 15:46:541288browse

html page code

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

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

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

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of DNS caching issues under NodejsNext article：A brief analysis of DNS caching issues under Nodejs

See more

Explore the simple application of ui.route in AngularJs

Related articles