angularjs学习:ui-router

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('/');
});  

你可能感兴趣的:(angularjs学习:ui-router)