ui-router最大的特点就是路由嵌套,所以也是最常用的
项目的架构
- directive:自定义指令层
- node_modules:安装的模块层(不需要手动创建)
- public:静态资源层(js,css等)
- route:路由层
- view:视图层
-index.html(首页)
templates(多个子页文件夹)
路由的搭建
- 注入angular模块,注入名字为ui.router
- 依赖注入服务,$stateProvider
和$urlRouterProvider
- .state后面是个id名
- url:后面是在地址栏的路径
- templateUrl是嵌套页面的绝对路劲
- $urlRouterProvider.otherwise是默认的页面
var app = angular.module("app",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",function($s
tateProvider,$urlRouterProvider){
$stateProvider
.state("home",{
url:"/home",
templateUrl:"../view/templates/main.html"
})
.state("home.tab1",{
url:"/tab1",
templateUrl:"../view/templates/tab1.html"
})
.state("home.tab2",{
url:"/tab2",
templateUrl:"../view/templates/tab2.html"
})
$urlRouterProvider.otherwise("home")
}])
页面搭建
index页:
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title></title> <link rel="stylesheet" type="text/css" href="../public/css/index.css"/> <script src="../node_modules/angular/angular.js"></script> <script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script> <script src="../route/route.js"></script> <script src="../directive/header.js" type="text/javascript" charset="utf-8"></script> <script src="../directive/content.js" type="text/javascript" charset="utf-8"></script> <script src="../directive/footer.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div ui-view> </div> </body> </html>
引入angular.js、angular-ui-router.js、route.js
因为本人用自定义指令将内容模块化了,所以需要引入其余jsmain页:默认的页面,也就是将所有的页的容器,都是自定义的指令
<div my-header></div>
<div my-content></div>
<div my-footer></div>- 其余页面正常写页面内容
自定义指令搭建
my-header.js/my-footer.js/my-content.js
app.directive("myFooter",function(){//指令的名字
return {
restrict:"A", //A代表属性
replace:true,
template"指令将要显示的内容"
}
})
注意:在my-content中需要再嵌入
<div ui-view></div>
点击跳转a标签写法
<a ui-sref="home.tab1">Tab1</a>
浏览器测试
- 默认页面效果
- 点击切换后的页面