先引用Angular然后引用ui-router
路由清单：我们依赖的ui.router中提供了一个服务$state，此时可以用config来配置这个服务。用$stateProvider的state方法来设置路由清单。也就是说，定义一个个“状态”。
小tip：服务除了factory、service之外，还有一个provider。provider一般工程师不会自己定义的，你只需要知道所有的内置服务都是provider函数写的。provider函数写出的服务，可以在依赖注入前，用config函数配置。
config表示配置，可以配置任何内置服务，此时$state就是插件给我们的服务。一般的，服务对应的Provider就是服务名字后面直接加Provider（下文中黄色背景代码段）：
<script type="text/javascript">
var myapp = angular.module("myapp",["ui.router"]);
//配置路由表，实际上在配置$state服务。
myapp.config(function($stateProvider) {
$stateProvider
.state({
name: 'news',
url: '/news',
template: '<h3>新闻频道</h3>'
})
.state({
name: 'music',
url: '/music',
template: '<h3>音乐频道</h3>'
})
.state({
name: 'movie',
url: '/movie',
template: '<h3>电影频道</h3>'
});
});
</script>
配置路由使用$stateProvider的state方法，又是一个装饰者模式。
.state().state().state()装饰了三回，连续打点。
配置的时候有三个配置：名字name、路由url、模板template。
此时页面上不要忘记放置一个
<ui-view></ui-view>
的E级别指令。此时动态的内容（template里面的内容）都将呈现在ui-view里面。
完整代码：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>路由演示</title>
</head>
<body>
<ui-view></ui-view>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
<script type="text/javascript">
var app = angular.module("app",["ui.router"]);
//对$state服务进行一个配置，此时可以书写路由清单
app.config(function($stateProvider){
$stateProvider
.state({
name: 'news',
url: '/news',
template: '<h3>新闻频道</h3>'
})
.state({
name: 'music',
url: '/music',
template: '<h3>音乐频道</h3>'
})
.state({
name: 'movie',
url: '/movie',
template: '<h3>电影频道</h3>'
});
});
</script>
</body>
</html>
1224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
