ui-router路由很详细

最新推荐文章于 2022-12-12 10:09:15 发布

飞雪CH

最新推荐文章于 2022-12-12 10:09:15 发布

阅读量3.7k

点赞数

分类专栏： angular.js 文章标签： ui-router 路由配置

angular.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.配置使用ui-router

1.1导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>
 
 1
2
 
 1
2

1.2注入angular模块

var app = angular.module('myApp', ['ui.router']);
 
 1
 
 1

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
这里写图片描述

1.3定义视图

ui-view替代的是ngroute路由的ng-view。

<div ui-view></div>
 
 1
 
 1

1.4配置路由状态

app.config(["$stateProvider", function ($stateProvider){       
    $stateProvider     
    .state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login
        url: '/',    //访问路径 
        template:'<div>模板内容......</div>'
    })      

 }]);
 
 1
2
3
4
5
6
7
8
 
 1
2
3
4
5
6
7
8

2.简单示例

<html>
  <head>   
    <title>ui-router</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!-- 导入JS -->
    <script type="text/javascript" src="JS/angular.min.js"></script>
    <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>  
  </head>

  <body >   
    <div ng-app="myApp">        
        <div ui-view></div> <!-- 视图 -->     
    </div>  
  </body>


  <script type="text/javascript">
    //定义模板，并注入ui-router
    var app = angular.module('myApp', ['ui.router']);   
    //对服务进行参数初始化，这里配stateProvider服务的视图控制
    app.config(["$stateProvider",  function ($stateProvider) {      
        $stateProvider     
        .state("home", {
            url: '/',   
            template:'<div>模板内容......</div>'
        })     
    }]);  
  </script>

</html>

原文链接是：http://blog.csdn.net/zcl_love_wx/article/details/52034193

飞雪CH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ui-router路由很详细

1.配置使用ui-router1.1导入js文件需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。script type="text/javascript" src="JS/angular.min.js">script>script type="text/javascrip
复制链接

扫一扫