ui-router

最新推荐文章于 2024-09-22 11:17:00 发布

Smart_px

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量326

点赞数 1

本文链接：https://blog.csdn.net/sinat_38220469/article/details/70184197

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Angular

2 篇文章 0 订阅

订阅专栏

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

浏览器测试