ui-router

来源：互联网发布：nba体测数据最差编辑：程序博客网时间：2024/05/22 03:43

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($stateProvider,$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
因为本人用自定义指令将内容模块化了，所以需要引入其余js

main页:默认的页面，也就是将所有的页的容器，都是自定义的指令
<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>

浏览器测试

默认页面效果

这里写图片描述

点击切换后的页面

0 0