AngularJS1.X就学笔记13-路由

  ThinkPHP框架来路由的概念,看起路由于再多之是后端的工作,Angular怎么为会见走来个行程由于为?事实上,Angular是观于单页应用之,他的一个用一般的话是一个页面,你所盼的页面内容之转,事实上只是改变了URL地址之#末尾的内容。路由于而解决的凡hash值与视图的附和关系。

如出一辙、从一个简约的例子开始

  1、安装angular-route模块

  图片 1

  2、试一下探访

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>route test</title>
</head>
<body>
    <h1>This is fixed part</h1>
    <ul>
        <li><a href="./">home</a></li>
        <li><a href="./#!/page1">page1</a></li>
        <li><a href="./#!/page2">page2</a></li>
        <li><a href="./#!/page3">page3</a></li>
    </ul>
    <div ng-view></div>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",['ngRoute'])
        .config(function($routeProvider,$locationProvider){
            $routeProvider
            .when("/page1",{
                templateUrl:"./1.html"
            }).when("/page2",{
                templateUrl:"./2.html"
            })
            .when("/page3",{
                templateUrl:"./3.html"
            })
            .otherwise({
                templateUrl:"./home.html"
            });
        })
    </script>
</body>
</html>

   我发现几所有人用行程由于时还是host/path/#/XX这样的模式,而我发觉地址栏并无是这般,地址栏的门径是:http://127.0.0.1/Angular/route/\#!/page3。所以上面的a的href有一个奇怪的!。这里不知道是什么情况,请知道的大神指点一下。

  Angular的路由依赖ngRoute模块,需要一个$routeProvider的劳动,用一个ng-view指令指定路由于的视图。

老二、路由于传参

  路由传参是少不了的,比如从一个列表页上一个端详页,需要拿吃点击的项的id穿过去。

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>route test</title>
</head>
<body ng-controller="getCtrl">
    <h1>This is fixed part</h1>
    <ul>
        <li><a href="./">home</a></li>
        <li><a href="./#!/page1/{{1}}">page1</a></li>
        <li><a href="./#!/page2/{{2}}">page2</a></li>
        <li><a href="./#!/page3/{{3}}/我是一个小傻瓜/乌拉啦五">page3</a></li>
    </ul>
    <div>参数id为:{{id || "unknown"}}</div>
    <div>参数data为:{{data || "unknown"}}</div>
    <div ng-view></div>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",['ngRoute'])
        .config(function($routeProvider,$locationProvider){
            $routeProvider
            .when("/page1/:id",{
                templateUrl:"./1.html"
            })
            .when("/page2/:id",{
                templateUrl:"./2.html"
            })
            .when("/page3/:id/:data*",{
                templateUrl:"./3.html"
            })
            .otherwise({
                templateUrl:"./home.html"
            });
        })
        .controller("getCtrl",function($location,$routeParams,$scope){
            $scope.$on("$routeChangeSuccess",function(){
                if($location.path().indexOf("/page")==0){
                var id = $routeParams["id"];
                var data  = $routeParams['data'];
                $scope.id = id;
                $scope.data = data;
                }
            })
        })
    </script>
</body>
</html>

图片 2

  这里以了个别栽传递参数的模式,:id和:data*,前者匹配到下一个/而后人匹配到竣工。关于获取参数,我们所以到了$routeParams服务,我们侦听路径改变事件,并判一下凡未是咱们要博参数的路,然后就是好比轻的拿到参数了。这是平等件非常硬的事。

  这里介绍一下$route服务

  图片 3

  上面显示了$route服务对象,reloac()用于重载视图,$route返回经过$routeProvider定义的路由集合,current返回时程由于信息目标。

  一些事件

事件名 触发条件
$routeChangeStart 路由改变前
$routeChangeSuccess 路由改变后
$routeUpdate 路由刷新
$routechangeError 路由不能改变

 

 

 

 

 

其三、路由于安排

  前面的路由都单所以到了一个配置项templateUrl,这不够灵活,现在介绍任何安排起。

配置项   作用
controler 指定视图的控制器
controllerAs 指定控制器别名
template 指定视图内容
templateUrl 指定视图URL
resolve 指定一组控制器的依赖
redirectTo 重定向路径
reloadOnSearch true(默认)仅当$location的search和hash方法改变返值时触发
caseInsensitiveMatch true(默认)忽略大小写

 

 

 

 

 

 

 

 


 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>route test</title>
</head>
<body ng-controller="getCtrl">
    <h1>This is fixed part</h1>
    <ul>
        <li><a href="./">home</a></li>
        <li><a href="./#!/page1/{{1}}">page1</a></li>
        <li><a href="./#!/page2/{{2}}">page2</a></li>
        <li><a href="./#!/page3/{{3}}/我是一个小傻瓜/乌拉啦五">page3</a></li>
    </ul>
    <div>参数id为:{{id || "unknown"}}</div>
    <div>参数data为:{{data || "unknown"}}</div>
    <div ng-view></div>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
    <script type="text/javascript">
        angular.module("myApp",['ngRoute'])
        .factory('serv',function(){
            return {
                log:function(){
                    return "hello";
                }
            };
        })
        .config(function($routeProvider,$locationProvider){
            $routeProvider
            .when("/page1/:id",{
                templateUrl:"./1.html"
            })
            .when("/page2/:id",{
                templateUrl:"./2.html"
            })
            .when("/page3/:id/:data*",{
                templateUrl:"./3.html",
                controller:"page3Ctrl",
                resolve:{
                    data:function(serv){
                        return serv.log();
                    }
                }
            })
            .otherwise({
                templateUrl:"./home.html"
            });
        })
        .controller("getCtrl",function($location,$routeParams,$scope,$route){
            $scope.show = function(){
                alert("我是index里边的控制器");
            }
            $scope.$on("$routeChangeSuccess",function(){
                if($location.path().indexOf("/page")==0){
                var id = $routeParams["id"];
                var data  = $routeParams['data'];
                $scope.id = id;
                $scope.data = data;
                }
            })
        })
        .controller('page3Ctrl',function($scope,data){
            $scope.show = function(){
                alert("我是page3的控制器");
            }
            console.log(data);
        })
    </script>
</body>
</html>

  这个事例吗page3指定了一个控制器,声明了和index中控制器一样方法名之道,发现page3调用的是投机控制器的措施。然后定义了一个劳动,用resolve声明了对其的凭,发现以page3控制器中可用。

  路由就如此喜欢的仿了了。听说发生只uiRoute模块很有力,很有益于,改天学学。感觉这个ngRoute已经能缓解过剩问题了。

相关文章