扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ui-router/
ui-router是angularjs的一个客户端的单页应用路由解决方案，它提供了一种类似一个层次树的状态来方便的实现各个页面间的跳转。
Q:路由是怎么显示各个模板？
当ui-routr状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层状态，那么它的父模板就是index.html。
Q：激活路由状态有三种方法：
1.调用$state.go()方法；
2.点击包含ui-sref指令的链接；
3.导航到与状态相关联的 url。
使用ui-router的准备工作：
（1）下载angular-ui-router.js
（2）在index.html中下载angular-ui-router.js
（3）把ui.router依赖注入
例：
...
...
例一、嵌套的状态和视图
（1）首先完成上边准备工作的设置
（2）然后添加一个ui-view指令到
（3）可能你会注意到我们还添加了ui-sref指令，另外为了管理状态转换，如果对应的状态有一个URL，这个指令还会自动生成链接的href属性，这些内容将会插入index.html的ui-view，注意：嵌套状态和视图的关键就是它们拥有自己的ui-view。
（4）接下来，我们添加一些子模板。这些模板将会插入它们的父模板的ui-view。
（5）最后，我们用$stateProvider来把所有的state连成一条线，像下面这样设置你的状态：
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url:"/state1",
templateUrl:"partials/state1.html"
})
.state('state1.list', {
url:"/list",
templateUrl:"partials/state1.list.html",
controller:function($scope) {
$scope.items= ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url:"/state2",
templateUrl:"partials/state2.html"
})
.state('state2.list', {
url:"/list",
templateUrl:"partials/state2.list.html",
controller:function($scope) {
$scope.things= ["A", "Set", "Of", "Things"];
}
});
});
这些只是一些简单的使用，具体的我们可以根据自己的需要改动。
例二、多个的命名视图
这是ui-router的另一个强大的功能，可以在一个模板页面中有多个ui-view。
（1）首先完成上边准备工作的设置
（2）添加一个或多个ui-view到你的应用并命名好。
（3）在config中设置你的状态
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url:"",
views: {
"viewA": { template:"index.viewA" },
"viewB": { template:"index.viewB" }
}
})
.state('route1', {
url:"/route1",
views: {
"viewA": { template:"route1.viewA" },
"viewB": { template:"route1.viewB" }
}
})
.state('route2', {
url:"/route2",
views: {
"viewA": { template:"route2.viewA" },
"viewB": { template:"route2.viewB" }
}
})
});
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网