Home > Developer > Web Develop
<body ng-app= "myApp" > <div ui-view></div> <div ui-view= "Login" ></div> <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 into the main program as a dependency of the Web application:
The Url:url option will specify a URL for the status of the app based on the status of the user browsing the app (address display link). This can be achieved when browsing the app 深度链接 .
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: ' Competi Tioncontroller '}). State (' Competition.detail ', {url: '/competition-detail ', Templateurl: '/competition-detail.htm L ', controller: ' Competitiondetailcontroller '}). State. (' Competition.enrollform ', {url: '/competition.enrollform ', Templateurl: ' competition-enrollfrom.html ', controll ER: ' Enrollfromcontroller '}). State. (' competition.comments ', {url: '/competition-comments ', Templateurl: ' competition-comments.html ', controller: ' C Ommentscontroller '}). State (' Competition.login ', {url: '/competition-login ', Views: {' [email protected] ' : {templateurl: ' competition-login.html ', Controller: ' LogincontRoller '}}). State (' Competition.enroll ', {
URL: '/competition-enroll ',
Views: {
' [Email protected] ': {
templateurl: ' competition-enroll.html ',
controller: ' Enrollcontroller '
}
}
})
}
It is important to note that the Ui.router uses the $stateprovider,ngroute$routeProvider。
$state. Go
$state. Go (To, [, Toparams],[,options])
parameter to is of type string and must use "^" or "." Represents a relative path;
The parameter toparams is nullable, and the type is an object;
Parameter options are nullable, types are objects, fields include: location is bool type default true,inherit is bool type default true, relative is object default $state. $current, Notify to bool type default to TRUE, reload to bool type default to False
$state. Go (' Photos.detail ')
$state. Go (' ^ ') to the upper level, e.g. from Photo.detail to photo
$state. Go (' ^.list ') to neighboring state, e.g. from Photo.detail to Photo.list
$state. Go (' ^.detail.comment ') to grandchild state, e.g. from Photo.detail to Photo.detial.comment
If you have any errors, please state them promptly.
Simple application of Ui.route in Angularjs
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
