24.路由
轉(zhuǎn)自：https://www.cnblogs.com/best/tag/Angular/
單頁Web應(yīng)用由于沒有后端URL資源定位的支持，需要自己實現(xiàn)URL資源定位。angularjs使用瀏覽器URL "#" 后的字符串來定位資源，區(qū)分不同的功能模塊。
路由并非在angularjs核心文件內(nèi)，你需要另外加入一段腳本 “angular-route.min.js”需要注意的是在創(chuàng)建 “app” 對象是需要填寫對 ngRoute 依賴
示例代碼：
routeTest.html 單頁程序的首頁
1 <!DOCTYPE html> 2 <html ng-app="app"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>路由展示</title> 7 <style> 8 a { 9 color: #333; 10 text-decoration: none; 11 } 12 13 a:hover { 14 color: orangered; 15 } 16 </style> 17 </head> 18 19 <body> 20 <p> 21 <a href="#/">返回列表</a> 22 <a href="#/t1">當(dāng)前時間</a> 23 <hr /> 24 </p> 25 <div ng-view></div> 26 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> 27 <script src="js/angular146/angular-route.min.js" type="text/javascript" charset="utf-8"></script> 28 <script id="t1" type="text/ng-template"> 29 當(dāng)前時間是：{{currentDate}} 30 </script> 31 <script type="text/javascript"> 32 var app = angular.module("app", ['ngRoute']); 33 app.config(function($routeProvider) { 34 $routeProvider.when('/', { 35 controller: 'listController', 36 templateUrl: 'list.html' 37 }); 38 $routeProvider.when('/t1', { 39 controller: 't1Controller', 40 templateUrl: 't1' 41 }); 42 $routeProvider.when('/detail/:id', { 43 controller: 'detailController', 44 templateUrl: 'detail.html' 45 }); 46 $routeProvider.otherwise({ 47 redirectTo: '/' 48 }); 49 }); 50 app.service("dataService", function() { 51 this.list = [{ 52 id: 1, 53 title: '谷歌', 54 url: 'http://www.google.com' 55 }, { 56 id: 2, 57 title: '百度', 58 url: 'http://www.baidu.com' 59 }, { 60 id: 3, 61 title: '必應(yīng)', 62 url: 'http://www.bing.com' 63 }, { 64 id: 4, 65 title: '搜狗', 66 url: 'http://www.sogou.com' 67 }, { 68 id: 5, 69 title: '雅虎', 70 url: 'http://www.yahoo.cn' 71 }]; 72 this.getEntity = function(id) { 73 var result = null; 74 angular.forEach(this.list, function(obj, index) { 75 if(obj.id == id) { 76 result = obj; 77 } 78 }); 79 return result; 80 } 81 }); 82 app.controller("listController", function($scope, dataService) { 83 84 $scope.items = dataService.list; 85 }); 86 app.controller("detailController", function($scope, dataService, $routeParams) { 87 88 $scope.obj = dataService.getEntity($routeParams.id); 89 }); 90 app.controller("t1Controller", function($scope) { 91 $scope.currentDate = new Date().toLocaleString(); 92 }); 93 </script> 94 </body> 95 96 </html>列表頁 list.html
<ul ng-repeat="item in items">
<li>
<a href="#/detail/{{item.id}}">{{item.title}}</a>
</li>
</ul>
詳細(xì)頁 detail.html：
1 <fieldset> 2 <legend>詳細(xì)信息</legend> 3 <p> 4 編號：{{obj.id}} 5 </p> 6 <p> 7 名稱：{{obj.title}} 8 </p> 9 <p> 10 網(wǎng)址： <a href="{{obj.url}}">{{obj.url}}</a> 11 </p> 12 </fieldset>運行結(jié)果：
總結(jié)
- 上一篇： 利用css布局效果图
- 下一篇： hive和hbase区别和联系