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使用。