HTML page code
<body ng-app= "myApp" > <div ui-view></div> <div ui-view= "Login" ></div> & Lt;div ui-view= "Enroll" ></div> </body>
Ui.router.js files that need to be referenced
<script src= "Angular-ui-router.js" ></script>
App.js
Inject Ui-router as a dependency on a Web application into the main program:
The Url:url option will specify a URL for the status of the application based on the user browsing the status of the application (address display link). This allows for a deep link to be achieved when browsing the application.
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', routeConfig]);
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider.state('competition', {
url: '/competition',
templateUrl: '/competition.html',
controller: 'competitionController'
}).state('competition.detail', {
url: '/competition-detail',
templateUrl: '/competition-detail.html',
controller: 'competitionDetailController'
}).state.('competition.enrollForm',{
url: '/competition.enrollForm',
templateUrl: 'competition-enrollFrom.html',
controller: 'enrollFromController'
}).state.('competition.comments',{
url: '/competition-comments',
templateUrl: 'competition-comments.html',
controller: 'commentsController'
}).state('competition.login',{
url: '/competition-login',
views: {
'login@': {
templateUrl: 'competition-login.html',
controller: 'loginController'
}
}
}).state('competition.enroll',{<br> url: '/competition-enroll',<br> views: {<br> 'enroll@': {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> templateUrl: 'competition-enroll.html',<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: 'enrollController'<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 the ui.router use of the $stateprovider,ngroute is $routeprovider.
$state. Go
$state. Go (To, [, Toparams],[,options])
The formal parameter to is a string type and must be used with "^" or "." Represents a relative path;
The formal parameter toparams is nullable and the type is an object;
Formal parameter options are nullable, types are objects, fields include: location to bool type default True,inherit to bool type default true, relative to object default
$state. $current, notify to bool type default to TRUE, reload to bool type defaults to False
$state. Go (' Photos.detail ')
$state. Go (' ^ ') to the previous level, such as from Photo.detail to photo
$state. Go (' ^.list ') to neighboring state, such as from Photo.detail to Photo.list
$state. Go (' ^.detail.comment ') to grandson State, such as from Photo.detail to Photo.detial.comment
The above is a small set to introduce the ANGULARJS in the simple application of ui.route, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
