`

【angularjs】【学习心得】路由

ui-routerng-class$stateParams 
阅读更多
AngularJS自带有路由模块ngRoute，但是有经验的老师都推荐我们使用功能更完善更强大的ui-router来做路由。那到底什么是路由呢？我自己的理解是：路由可以看作一个总控制器，它会根据页面的不同状态来填充页面的内容，这就是路由的主要用处。前端路由能极大地减少对服务器资源的请求数量，因此在前端做路由显得尤为重要。
-----------------------------------------------------------------
    由于路由是控制整个应用的显示状态的，所以我们要让路由模块第一时间接管整个应用。
    使用ui-router很简单，下载它的包，在index.html中引入js文件，然后在模块的依赖中引入即可。   
1
    var routerApp = angular.module('routerApp', ['ui.router']);
    ui-router的本质其实是向我们预留的部分填充模板，它会在页面中去寻找ui-view这条指令，然后根据当前页面状态把对应的模板填充到ui-view所在的区块中。
    比如一个典型的页面是nav+footer固定不变，中间主要部分作为内容显示区域时常发生变化。对应的页面结构就是   
1
2
3
4
5
    <body>
        <nav>This is nav</nav>
        <div ui-view></div>
        <footer>This is footer</footer>
    </body>
    然后我们的路由根据页面的状态，选择不同的html模板填充到ui-view的这个div里面。
    在js中具体怎么使用ui-router呢
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
routerApp.config(function($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/index');
        $stateProvider
               .state('index',{
                       url           : '/index',
                       templateUrl    : 'tpls/index.html'
               })
               .state('list',{
                       url           : '/list',
                       templateUrl     : 'tpls/list.html'
               })
               .state('detail',{
                       url           : '/detail',
                       templateUrl     : 'tpls/detail.html'
               });
});
    以上就是angular路由最基本的模板。但是要注意一个问题，state的第一个参数并不是匹配规则，而是叫状态名，也就是说这个参数事实上可以是任意的，它用来给当前状态增加一个名字，触发路由规则还是看url的内容。比如这样
1
2
3
4
    .state('home',{
        url         : '/index',
        templateUrl : 'tpls/index.html'
    })
    我们必须要地址栏输入www.xx.com/index，才会加载对应的模板而不是输入home，它仅仅是一个名字而已。
    但是说，这个名字也是有它的作用的。看一个例子就明白了。
    index.html
1
2
3
    <nav>This is the nav</nav>
    <div ui-view></div>
    <footer>This is the footer</footer>
    list.html
1
2
3
4
    <div>
        <p>this is the list page</p>
        <div ui-view></div>
    </div>
    list-main.html
1
2
3
        <div>
               <p>This is list-main Page</p>
        </div>

    如果我们的路由这么写
1
2
3
4
5
6
7
8
               .state('aaa',{
                       url           : '/list',
                       templateUrl : 'tpls/list.html'
               })
               .state('bbb',{
                       url           : '/list/main',
                       templateUrl : 'tpls/list-main.html'
               })
   那当我们在浏览器中输入www.xx.com/list/main的时候，页面结果为
      5472d6ee0001fc2803350157.jpg                                               
    如果我们的路由这么写
1
2
3
4
5
6
7
8
               .state('aaa',{
                       url            : '/list',
                       templateUrl : 'tpls/list.html'
               })
               .state('aaa.bbb',{
                       url            : '/main',
                       templateUrl : 'tpls/list-main.html'
               })
    那当我么输入www.xx.com/list/main的时候，页面结果为
    5472d6fd0001ebcf03690177.jpg
    也就是说state的的第一个参数为页面定义了一个名字，这个页面的模板只能放到它的父级中的ui-view去。如果没有.这种写法，那么默认的父级是index.html，所以第一种写法bbb模板的父级是index.html，所以输入/list/main时会把对应模板加载到index.html中的ui-view里面。而第二种写法aaa.bbb，这意思是说bbb的父级是aaa，所以bbb的模板要放到aaa模板(也就是list.html)中的ui-view中。这时的url是在aaa页面的url后的url。
    当然还有页面的嵌套，这部分其实大漠老师在视频中已经讲得很清楚了。
    这是路由需要注意的一个作用域问题。
-----------------------------------------------------------------------
    当然路由还有很多其他问题，因为路由是angularjs中很重要的一部分，但基本的用法就是上面所讲的了，如果把所有静态页面都写好了，那么用以上的内容就已经能做出一个精美的web了。现在学习了路由的基本用法，其它问题的话我们碰到一个再解决一个吧。



2014-11-24AngularJSJavaScript9488 浏览15 回答

PHPBird
    今天还是来说一下angular中的路由模块。我们实际项目中，各个页面的切换是经常会与Auth相关的。比如我网站的后台，是需要登录过的用户才能进去，那么我们用angularJS做前端路由的时候应该怎么完成这个功能呢
------------------------------------------------------------------------
    我们还是先设想一个最简单的场景吧。我们的应用有两个页面，登录页面后内容页面，要求是必须要验证登录成功后才能进入内容页面，下面我们一起来实现一下这个例子吧。当然我觉得我的方法可能会比较Low，但是学习阶段我们能先把功能做出来比什么都重要。
    首先用bootstrap来写一个简单的登录页面吧。具体bootstrap代码我就不说了，我们关注的是angular在这里面如何用起来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-md-offset-3 col-md-4">
    <form class="form" role="form" name="loginForm" ng-submit="loginCheck()">
        <div class="form-group">
            <label class="control-label">用户名</label>
            <input type="text" class="form-control" required placeholder="请输入管理员账号" ng-model="admin.username">
        </div>
        <div class="form-group">
            <label class="control-label">密码</label>
            <input type="password" class="form-control" ng-model="admin.pwd" required placeholder="请输入密码">
        </div>
        <div ng-show="showError" class="alert alert-danger alert-dismissible" role="alert">
              <button ng-click="showError=false" type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
              用户名或密码错误！！你还有一次机会
        </div>

        <input type="submit" class="btn btn-primary btn-lg" value="登录" ng-disabled="loginForm.$invalid">
    </form>     
</div>
    效果如下
        54788faf000197b405000227.jpg
    当然我之前还有一些css的布局，粘代码过去可能会出错哦，至少得在最外层加一个div class="row"
    还可以看见，我给登录按钮加了个ng-disabled，当表单没有通过验证的时候是不能点登录的。
    然后我加了一个提示的tips，用到了ng-show，在controller里会有一个showError的属性来控制它的显示，当验证账号密码错误时showError为true。
    当我们验证出错的时候
        547892c90001675104860298.jpg
   
    接着我们来看一下路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var myApp = angular.module('myApp', ['ui.router','myModule']);
myApp.run(function($rootScope, $state, $stateParams){
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.$state.isLogin = false;
});
myApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('login',{
            url        : '/login',
            templateUrl : 'tpls/login.html',
            controller  : 'LoginController'
        })
        .state('index',{
            url        : '/index',
            templateUrl : 'tpls/index.html',
            controllerProvider : function($rootScope){
                if($rootScope.$state.isLogin == false){
                    $rootScope.$state.go('login');
                }
                return function(){};
            }
        });
    }
    因为在整个页面中我们都会用到登录状态，所以我把登录状态绑定到rootscope中，isLogin刚开始是false表示未登录。
    接着看路由里面，login这个很简单，主要看index页面。
    关键的一步就是index的controller，在这里我选择用controllerProvider的方式来生成controller，可以看到我们最后实际上是返回的一个空的function，但是在返回空controller之前（index页面还没有解析），我可以做一些事情，那就是验证权限啦！
    如果$rootScope.$state.isLogin为false也就是还没有登录，那就直接跳转到登录页面。跳转用到了$state里面的go方法，go中的变量就是我们每个页面的状态名，也就是state的第一个参数。我是go('login')，它就跳转到state的第一个参数是login的那个页面去了，也就是登录页面。换句话说，如果我们登录提交后验证没有成功，当我们在地址栏输入/index的时候会跳到登录页面的哦。
    那么再来看看我们的验证模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
myModule
   .controller('LoginController', function($scope,$rootScope,$http){
      $scope.showError = false;
      $scope.loginCheck = function(){
        var username = $scope.admin.username;
    var pwd = $scope.admin.pwd;
    var loginSuccess = false;
    http.get('/acm-admin/data/user.json')
     .success(function(response){
       for(var i=0; i<response.length; i++){
         if(response[i].username == username && response[i].pwd == pwd){
        $rootScope.$state.isLogin = true;
        loginSuccess = true;
        $rootScope.$state.go('index');
         }
       }
       if(!loginSuccess){
        $scope.showError = true;
       }
    });
   }
  })
   
    初始化我们给showError一个值为false,不要显示错误提示框。然后来看看验证登录的这个方法。首先获取到用户输入的用户名和密码，设置登录成功的状态的false。然后通过$http.get，到指定的地方去取一个json文件，很显然这是个假数据，我们把预设的用户名和密码存放到这个json文件中。取出预设的用户名和密码之后就和用户输入的来进行对比，相信这都很简单，大家肯定能看明白。如果用户名和密码都对上了，那么就把登录状态设置为true，登录成功也设置为true。然后用$state的go方法跳转到Index页面。
    如果登录信息验证失败，那么就把showError赋为true，页面上就会显示提示信息咯。
----------------------------------------------------------------------------
    怎么样，很简单吧。当然还有其它实现这一功能的方法，而且我上述的方法很可能还有诸多安全隐患，而且模块的分工也是不明确的，淡然实际部署不推荐这么写了。我们可以优化改进的地方很多，比如验证的模块是不是应该独立出去呢，或者用户有没有什么办法能轻易绕过这个登录保护呢？这就留待小伙伴们自己探究了……继续学习angular去了，大家晚安！！
2014-11-28  回复  2

PHPBird
    其实路由的功能是比较复杂的，我们实际应用中页面的状态也是非常多的，上面简单的路由是肯定不能满足我们的需求的，所以我们必须要更深入地了解下路由以及它更有用的一些用法。
--------------------------------------------------------------------
    首先来说一下templateUrl属性，上面说了它的值是对应模板的地址，比如
1
2
3
        ...
        templateUrl : 'tpls/index.html',
        ...
    但事实上我们也可以用一个函数作为值，但是这个函数必须返回模板的地址，比如
1
2
3
4
5
        ...
        templateUrl : function(){
                        return 'tpls/index.html';
                      },
        ...
    这两段代码的效果其实是一模一样的，很容易理解。但是我们在实际应用的时候会经常有这样的需求：在url里拼接get参数，然后后台利用get参数去读数据库然后返回相应的内容。这时候用第一种方法实现起来可能就不那么容易（但是也是能实现的），而用第二种方法就很容易了。
    那么在这之前需要介绍一个很有用的东西叫做$stateParams，看名字也很容易理解，状态参量。这个东西就存储了页面状态的有关信息，我们通过一个例子来看看这到底是神马东东。
        这是我们的list.html页面
1
2
3
4
5
<div>
    <p>This is the list page</p>
    <a ui-sref="detail({articleId:'111'})">文章详情</a>
</div>  
        这是detail.html页面
1
2
3
<div>
    <p>This is the detail page</p>
</div>
        这是路有部分了，注意看哟
1
2
3
4
5
6
7
8
9
10
11
.state('list',{
    url        : '/list',
    templateUrl : 'tpls/list.html'
})
.state('detail',{
    url        : '/detail/{articleId}',
    templateUrl : function($stateParams){
                      console.log($stateParams);
                      return 'tpls/detail.html';
                  }
})
    先来看看效果，当我们进入list页面时是下面这个样子
    5475f3190001e56403160176.jpg
    我们点击文章详情这个链接后，页面变成了detail，并且下面打印出了$stateParams
    5475f3190001aba903240258.jpg
   
    这里我们发现它是一个对象，并且包含了我们所传递的参数。小伙伴们看看我上面是怎么在url里传递参数的哦，就是加一个括号，里面放一个我们要传递的对象即可。传递对象参数的时候需要注意，路由中url后面跟了多少参数你就只能传递那么多参数,比如
    路由中这么写
1
2
3
4
5
6
7
.state('detail',{
    url        : '/detail/{articleId}/{else}',
    templateUrl : function($stateParams){
                      console.log($stateParams);
                      return 'tpls/detail.html';
                  }
})
    html页面中这么写
1
2
3
4
<div>
    <p>This is the list page</p>
    <a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
    那我们输出的效果就是这样的
    5475f62c0001ec4303800275.jpg

    怎么能用它呢？小伙伴们记得路由中的另一个参数controller，它为模板指定了一个controller，事实上我们可以把$stateParams传入controller中，看个例子吧
    首先我们在index.html引入controller.js
    list页面和上面没有变化
1
2
3
4
<div>
    <p>This is the list page</p>
    <a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
    路由中我们还是这么写，但是给detail页面指定了一个controller
    然后我们在controller.js里面
1
2
3
4
5
6
    //注意，我们需要在路由最开头的依赖中加上myModule哦
    var myModule = angular.module('myModule',[]);
    myModule
        .controller('DetailController',function($scope,$stateParams){
            console.log($stateParams);
        });
     当我们在list页面中点击链接时，进入detail页面，效果如下
    5475fa040001985b03310231.jpg
    我们在controller中也能打印出传递的参数，这就很有意思了。我们可以在controller中根据传递过来的参数和后台服务器进行通信然后把返回的结果绑定在scope上，页面是不是就可以显示出来了呢，比如这样
   
1
2
3
4
5
6
7
myModule.controller('DetailController', function($scope,$stateParams){
    console.log($stateParams);
    $http.post('API_URL',{params:$stateParams})
        .success(function(data,status,headers,config){
            $scope.content = data;
        });
})
    我们通过http服务把$stateParams发送到后台，然后把返回的数据绑定在$scope.content上，detail.html中的{{content}}是不是就可以跟着变化了呢？
------------------------------------------------------------------------
    今天就暂时写这么多，以上是最近实践路由的一些经验，但是路由的用法还可以更灵活，这需要我们掌握更多这方面的内容。
    PS:今天有门课期末前两天不得不预习了整本书，缺了两天，但是我觉得应该反思，养成一个好习惯不容易，不应该为自己找各种理由，而且目测一般都挂科了……时间虽然紧，但挤挤肯定还是有的！
2014-11-27  回复  1

PHPBird
    今天来说一点angularjs中看起来很简单但是实践起来又有不少问题的ng-class吧
------------------------------------------------------------------------
    不过还是先说一下和angular无关的一个js的小坑，不知道大家遇到过没有，就是json格式的文件。之前一直都在js中定义json数组，或者从php后台用json_encode编码后直接返回，从没有自己写过json格式的数据，今天就遇到点麻烦。
    在js中定义json数组这么写就好了：
1
    var arr = [{a:1,b:2},{a:5,b:10}];
    但是在json文件中千万不能这么写
1
    [{a:1,b:2},{a:5,b:10}]
    必须给key加上引号才行哦。今天调试好久才发现这个问题，也算个教训吧……
------------------------------------------------------------------------
    然后说ng-class这个东西，老师讲的时候一句带过，用的时候还是需要费些时间的。
    我总结了一下通过ng-class给元素动态地加class有4种做法，下面一个一个来说。
    先看一下官方的说明
    547747ed00019d2705000171.jpg
    不知道大家能不能看清，给个链接吧https://code.angularjs.org/1.3.0-beta.11/docs/api/ng/directive/ngClass
    大致翻译一下就是说ng-class指令有3中操作方式，通过ng-class等于的表达式计算出来的值的类型来决定是哪种
    方式1： 当它的值为一个字符串时，它就会把用空格分开的字符串加到class中
    方式2： 当值为一个数组时，它每个字符串元素都会被加到class中
    方式3： 当值为一个对象时(key=>value)，把value为true的key加到class中

    首先是最不推荐的
1
2
3
4
5
6
7
    <div ng-class="{{myclass}}"></div>
    ....
    <script>
        function someController($scope){
            $scope.myclass = "xxx";
        }
    </script>
    上面这种方法效果上来说没问题，但是完全没必要用ng-class，普通的也能实现这个效果。而且在controller中控制样式总感觉有点儿别扭……

    然后说另一种用法
1
    <div ng-class="{true :'red', false :'green'}[someVariable]"></div>
    这种用法就是说variable为true时，就给元素加上red这个class，如果variable为false就加上green这个class，这个在逻辑比较简单的时候还是蛮好用的。

    下一种适合需要添加多个类的时候，也就是ng-class的值为一个对象
1
2
3
4
5
6
    <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
    <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)
    <br>
    <input type="checkbox" ng-model="important"> important (apply "bold" class)
    <br>
    <input type="checkbox" ng-model="error"> error (apply "red" class)
    上面代码ng-class就是一个对象，我们把deleted,important,error进行双向数据绑定，当我们在checkbox勾选时，它们变为true，然后对应的key就被加到class中，效果图
    547749e500016b1f02880112.jpg
   
    还有一种就是数组类型的，数组都每个字符串元素都会被加到class中
1
2
3
4
5
6
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1" placeholder="Type: bold, strike or red">
    <br>
    <input ng-model="style2" placeholder="Type: bold, strike or red">
    <br>
    <input ng-model="style3" placeholder="Type: bold, strike or red">
    当我们在样式中定义好bold,strike,red；类的样式后，我们输入这些字符串就会出现效果
    54774a860001390801760135.jpg
    大概就是这几种用法，我推荐大家用对象来添加对象，那样最好控制逻辑也清楚。
------------------------------------------------------------------------------
    今天就分享这些吧，希望对大家有些帮助
2014-11-28  回复  1

purple_yao
总结得很好，谢谢分享出来。哈哈
2014-11-26  回复  0

flyysr
谢谢分享，我也在学这个，可以交流
2014-12-24  回复  0

em_heqian
谢谢分享心得   很有帮助
2015-01-14  回复  0

我好吗
感谢分享，看完之后了解很多
2015-03-17  回复  0

___Qie听风吟
controller如果被实例化过会有缓存的吗？

比如说我先进入index页，然后再点击登陆页，完成后自动跳到index页。但是index页的controller没有像第一次进出时数据的初始化

有什么办法让controller重新加载么
用的ui-router来做路由

2015-04-22  回复  0

菠萝小萝卜
哥们，你这问题解决了没？
#12015-09-21 回复

catdp
多谢分享，帮助很大！
2015-05-10  回复  0

TLE
谢谢分享，希望继续求教
2015-05-21  回复  0

chifanqu
请问大神ui-router能实现动画吗？
用ng-router时候，页面会自动获得ng-enter这个属性，ui-router可以实现吗
2015-06-01  回复  0

hapiman
可以分享哈你的代码么
2015-06-15  回复  0

飘逝的绝唱
感觉写的前后不连贯 可能是笔记的原因 跳跃性比较强 按照步骤没办法进行 只能给已经懂的人 加深印象
2015-06-18  回复  0

飘逝的绝唱
不过整体来说 是对大漠课堂的细致讲解
2015-06-18  回复  0

老徐徐
不错，写的很好
1天前
分享到：
| AngularJS ui-router (嵌套路由)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    angularjs ui.router嵌套路由demo

    本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo，程序代码采用VS2013开发，代码齐全,可直接运行。有需要的带走吧~v~v~

    AngularJS 路由route 0217Demo

    AngularJS 路由route 0217Demo

    angularJS route路由demo

    angularJS route路由demo

    AngularJS ui-router(嵌套路由)

    AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问 这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一...

    angularjs路由

    一个简单的Angularjs路由器的demo

    AngularJS 路由

    AngularJS 路由

    Maven之Spring Boot_angularJS--路由版

    使用AngularJS作为前台页面框架，控制前台页面，实现页面多视图模块化，真正实现页面跳转更改路径不刷新效果，这是Ajax无法实现的功能。

    AngularJS入门教程二：在路由中传递参数的方法分析

    本文实例讲述了AngularJS在路由中传递参数的方法。分享给大家供大家参考，具体如下： 我们不仅可以在控制器中直接定义属性的值，比如: app.controller('listController',function($scope){ $scope.name="ROSE"; })...

    AngularJS入门教程07：路由与多视图

    在这一步，你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 AngularJS初学者看到中文入门教程，却无法使用GitHub下载到配套的Angular的Seed工程，因此学习曲线大。在此专门下载配套...

    AngularJS监听路由的变化示例代码

    【一】Angular 路由状态发生改变时可以通过’ $stateChangeStart ‘、’ $stateChangeSuccess ‘、’ $stateChangeError ‘监听，通过注入’$location’实现状态的管理 代码示例如下： function run($...

    AngularJS 路由详解和简单实例

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。 通常...

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    AngularJS监听路由变化的方法

    使用AngularJS时，当路由发生改变时，我们需要做某些处理，此时可以监听路由事件，常用的是$routeStartChange, $routeChangeSuccess。完整例子如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    简单讲解AngularJS的Routing路由的定义与使用

    主要介绍了AngularJS的Routing路由的定义与使用,讲解了when()和otherwise()两个相关的常用方法,需要的朋友可以参考下

    AngularJS实现使用路由切换视图的方法

    主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下

    AngularJS路由切换实现方法分析

    主要介绍了AngularJS路由切换实现方法,结合具体实例形式分析了AngularJS路由切换的实现步骤与相关操作技巧,需要的朋友可以参考下

    AngularJS路由实现页面跳转实例

    主要为大家详细介绍了AngularJS路由实现页面跳转的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Magicbox
Global site tag (gtag.js) - Google Analytics