Angular-ui-router是建立SPA的route框架，学好ui-router框架，我们能更好的优化我们的web前端。
下面先呈上我们的index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn-ui-router</title>
<style>
.active {
color : red;
font-weight : 600;
}
</style>
</head>
<body ng-app="app"> <!-- 申明这是一个angular模块 -->
<!-- ui-sref 是一个指令，当点击的时候，会激活一个状态,它的功能类似于href,它代表的是一个state，有了这个指令后，dom会自动在这个a上面生成一个href属性，属性值就是state的url值-->
<!-- ui-sref-active 代表当状态被激活的时候，呈现的class ,可以自定义样式，然后值写成你定义的即可 -->
<a ui-sref="main" ui-sref-active="active">main</a>
<a ui-sref="about" ui-sref-active="active">about</a>
<a ui-sref="help" ui-sref-active="active">help</a>
<!-- 上面状态激活后，模板加载的地方 -->
<ui-view></ui-view>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>
angular.module("app",['ui.router'],function($stateProvider){
$stateProvider.state({
name : "main",
url : "/main",
template : "<span> i have a dream ! </span>"
}).state({
name : "about",
url : "/about",
template : "<span> This is a about page ! </span>"
}).state({
name : "help",
url : "/help",
template : "<span> please call the 110 for help ! </span>"
})
})
</script>
</body>
</html>1，首先你需要先下载好angular.js或者 angular.min.js 还有 angular-ui-router.js ，
2，创建一个module，angular.module()，该方法在参数个数不同的时候，功能也不尽相同，当一个参数的时候，如 ： var getModule = angular.module("app") 该方法代表获取一个建立好的module，那么如何创建一个module呢？ angular.module("app",[依赖项],configFunction) 依赖项可以为空数组，configFunction也可不写，或者angular.module(“app”,[依赖项]).config(function(){})，效果是一样的
3，$stateProvider提供三个state，供上面的ui-sref使用。
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
