15-Angular的路由

jopen 8年前發布 | 20K 次閱讀 HTML Web框架 angularjs

現在非常流行單頁面應用，傳統都是通過ajax請求數據，前端拿到數據渲染到頁面，這種無刷新的視圖切換非常棒！但是致命的缺點就是刷新後無法保持原來的視圖，解決此問題的一個方法是使用 hash，監聽hashchange事件來進行視圖切換，另一個方法是用HTML5的history API，通過pushState()記錄操作歷史，監聽popstate事件來進行視圖切換，也有人把這叫pjax技術。

現在開始介紹angular的$route！

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首頁</a>
    <a href="#bbb">內容</a>
    <a href="#ccc">標題</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa',{
        template : '<h1>AAA</h1>'
    }).when('/bbb',{
        template : '<h1>BBB</h1>'
    }).when('/ccc',{
        template : '<h1>CCC</h1>'
    }).otherwise({   //默認哈希值，哈希值出現錯誤也可以執行
        redirectTo : '/aaa'
    });
}]);
m1.controller('Aaa',['$scope',function($scope){

}]);
</script>
</body>
</html>

上面的例子很簡單， 除了用template之外還可以用templateUrl引入html的模板文件。

在when傳入控制器的指向，實現不同的頁面顯示不同的數據。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首頁</a>
    <a href="#bbb">內容</a>
    <a href="#ccc">標題</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa',{
        template : '<h1>AAA</h1>{{name}}',
        controller : 'Aaa'    //控制器指向
    }).when('/bbb',{
        template : '<h1>BBB</h1>{{name}}',
        controller : 'Bbb'
    }).when('/ccc',{
        template : '<h1>CCC</h1>{{name}}',
        controller : 'Ccc'
    }).otherwise({
        redirectTo : '/aaa'
    });
}]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'xiecg-Aaa';
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
    $scope.name = 'xiecg-Ccc';
}]);

</script>
</body>
</html>

以事件的方式映射路由頁面。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path('aaa')">首頁</a>
    <a href="javascript:void(0);" ng-click="$location.path('bbb')">內容</a>
    <a href="javascript:void(0);" ng-click="$location.path('ccc')">標題</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa',{
        template : '<h1>AAA</h1>{{name}}',
        controller : 'Aaa'    //控制器指向
    }).when('/bbb',{
        template : '<h1>BBB</h1>{{name}}',
        controller : 'Bbb'
    }).when('/ccc',{
        template : '<h1>CCC</h1>{{name}}',
        controller : 'Ccc'
    }).otherwise({
        redirectTo : '/aaa'
    });
}]);
m1.controller('Aaa',['$scope','$location',function($scope,$location){
    $scope.name = 'xiecg-Aaa';
    $scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
    $scope.name = 'xiecg-Ccc';
}]);

</script>
</body>
</html>

項目更復雜，頁面相同(首頁&index)，數據不同，需要對url進行傳參。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path('aaa/123')">首頁</a>
    <a href="javascript:void(0);" ng-click="$location.path('bbb')">內容</a>
    <a href="javascript:void(0);" ng-click="$location.path('ccc')">標題</a>
    <a href="javascript:void(0);" ng-click="$location.path('aaa/456')">index</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa/:num',{
        template : '<h1>AAA</h1>{{name}}',
        controller : 'Aaa'
    }).when('/bbb',{
        template : '<h1>BBB</h1>{{name}}',
        controller : 'Bbb'
    }).when('/ccc',{
        template : '<h1>CCC</h1>{{name}}',
        controller : 'Ccc'
    }).otherwise({
        redirectTo : '/aaa/:num'
    });
}]);

m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
    $scope.name = 'xiecg-Aaa';
    $scope.$location = $location;
    console.log($routeParams);    //不同的數據
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
    $scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>

路由的事件監聽。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>$route</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <a href="#aaa">首頁</a>
    <a href="#bbb">內容</a>
    <a href="#ccc">標題</a>
    <div ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute']);

m1.run(['$rootScope',function($rootScope){
    //路由切換之前觸發的事件
    $rootScope.$on('$routeChangeStart',function(event,current,pre){
        console.log(event);      //事件對象
        console.log(current);    //路徑對應的數據值
        console.log(pre);        //上一個路徑
    });
}]);

m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa',{
        template : '<h1>AAA</h1>'
        //templateUrl : 'temp.html'
    }).when('/bbb',{
        template : '<h1>BBB</h1>'
    }).when('/ccc',{
        template : '<h1>CCC</h1>'
    }).otherwise({    //默認哈希值，哈希值出現錯誤也可以執行
        redirectTo : '/aaa'
    });
}]);
m1.controller('Aaa',['$scope',function($scope){

}]);

</script>
</body>
</html>

補充：angular事件的傳播機制。

<div ng-controller="Aaa">
    {{count}}
    <div ng-controller="Aaa" ng-click="$emit('myEvent')">
        {{count}}
        <div ng-controller="Aaa">
            {{count}}
        </div>
    </div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){
    $scope.count = 0;
    $scope.$on('myEvent',function(e){
        //console.log(e.targetScope);     //當前的
        //console.log(e.currentScope);    //目標的
        //console.log(e.name);            //事件名
        //e.stopPropagation();            //阻止冒泡
        $scope.count++;
    });
}]);
</script>

前面嵌套了三個controller，我們在中間的controller上綁定了click事件，使用$emit點擊的時候，上面的controller也會觸發事件。

如果是$broadcast點擊就是往下傳播。

學習筆記，如有不足，請指正！轉載請保留原文鏈接，謝謝。

最後，微博求粉，謝謝。

來自： http://www.cnblogs.com/xiaoxie53/p/5115132.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！