angularjs学习：ui-router

为什么80%的码农都做不了架构师？>>>   

1.安装angularUI的ui-router组件

2.ui-router是一个路由框架，允许你通过状态机组织接口，而不是简单的URL路由。

<div ui-view></div>

通过ui-view指令来表示一个视图。定义在任意给定状态内的 模板都处在<div ui-view></div> 元素内。此外，
每个模板都可以包含自己的ui-view。 这事实上就允许你在路由中嵌套视图。

通过config()来设置路径配置：

.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'partials/start.html'
})
});

这一步给状态配置对象分配了一个名为start的状态。这个状态配置对象，或者说这个 stateConfig也有一些与路由配置对象相似的选项，让你能够配置应用程序的状态。 

在每个视图上设置模板的方式有三种。

    template：一个HTML内容字符串或者返回HTML的函数。
    templateUrl：一个模板URL路径字符串或者是返回URL路径字符串的函数。

   templateProvider：一个返回HTML内容字符串的函数。

$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: ;<div ui-view></div>'
}).state('admin.index', {
url: '/index',
template: '<h3>Admin index</h3>'
}) 

abstract抽象模板永远不能直接激活，但是可以设置被激活的子节点

3.$urlRouterProvider
$urlRouterProvider路由提供程序构建规则，规定当特定的URL被激活时会发生什么

.config(function($urlRouterProvider) { //想将一个空路由重定向到/inbox： 
$urlRouterProvider.when('', '/inbox');                                                             }); 

when() when函数接受两个参数：想要匹配的入口路径和用于重定向的路径（或者是在路径
匹配时调用的函数）。

otherwise() 在没有其他路由匹配时发起重定向。这个方法是创建默认URL的一种很好的方式。

.config(function($urlRouterProvider) { //重定向到/： 
$urlRouterProvider.otherwise('/');
});

转载于:https://my.oschina.net/haoqoo/blog/420122