首頁 > 開發者 > JavaScript
AngularJS實現路由執行個體，angularjs路由執行個體
1、首先我們要引進angular.js和angular-route.js檔案
複製代碼 代碼如下: <script type="text/javascript" src=lib/angular.min.js></script><script type="text/javascript" src=lib/angular-route.js></script>
2、然後我們要在html中建立錨點和容器（ng-view）
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a><a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a><div ng-view></div>
3、在模組中注入ngRoute依賴
複製代碼 代碼如下: angular.module('myApp',['ngRoute'])
4、配置路由
config(['$routeProvider',function ($routeProvider) { $routeProvider.when('/first',{ template : '<h1> first </h1>' }) .when('/second',{ template : '<h1> second </h1>' }) .otherwise({ redirectTo : '/first' }) }])
效果展示：
完整代碼：
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src=lib/angular.min.js></script> <script type="text/javascript" src=lib/angular-route.js></script></head><body> <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a> <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a> <div ng-view></div> <script type="text/javascript"> angular.module('myApp',['ngRoute']) .config(['$routeProvider',function ($routeProvider) { $routeProvider.when('/first',{ template : '<h1> first </h1>' }) .when('/second',{ template : '<h1> second </h1>' }) .otherwise({ redirectTo : '/first' }) }]) </script></body></html>
接下來我們做一個類比項目路由
1、首先我們看一下我們所需要的檔案
所有檔案展示
2、之後我們看一下
有兩個頁面，first page跟second page，點擊兩個按鈕，切換不同頁面，展示不同樣式
3、好了。我們看一下代碼吧！
index.html
<!DOCTYPE html><html ng-app='myApp'><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="lib/angular.min.js" ></script> <script type="text/javascript" src="lib/angular-css.js" ></script> <script type="text/javascript" src="lib/angular-route.js" ></script></head><body> <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a> <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a> <div ng-view></div> <script type="text/javascript" src='app.js'></script> <script type="text/javascript" src='js/services.js'></script> <script type="text/javascript" src='js/controller.js'></script></body></html>
代碼解釋：
首先我們要引進三個檔案
1）angular.min.js----angularJS指令碼
2）angular-css.js----用來轉化css的指令碼
3）angular-route.js----路由指令碼
然後我們需要兩個錨點
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a><a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>
最後我們需要一個路由匯入的容器
複製代碼 代碼如下: <div ng-view></div>
之後我們將路由的配置、服務、控制器分別放在app.js、services.js、controller.js檔案中，便於代碼的管理、維護。
4、接下來我們看一下路由的部分
angular.module('myApp',['ngRoute','angularCSS']) .config(['$routeProvider',function ($routeProvider) { $routeProvider .when('/first',{ templateUrl : './view/first.html', controller : 'FirstCtrl as firstCtrl' }) .when('/second',{ templateUrl : './view/second.html', controller : 'SecondCtrl as secondCtrl' }) .otherwise({ redirectTo : '/first' }) }])
代碼解釋：
1）首先，第一行，在myApp模組中注入ngRoute跟angularCSS依賴。
2）然後配置路由（config）：
AngularJS 模組的 config 函數用於配置路由規則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數並且使用$routeProvider.whenAPI來定義我們的路由規則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數按順序定義所有路由，函數包含兩個參數:
第一個參數是 URL 或者 URL 正則規則。第二個參數是路由設定物件。
3）controller
function、string或數群組類型，在當前模板上執行的controller函數，產生新的scope。
4）controllerAs
string類型，為controller指定別名。
5）redirectTo
重新導向的地址
6）resolve
指定當前controller所依賴的其他模組。
路由設定對象總覽：
5、下面我們看一下服務部分，service.js
angular.module('myApp') .factory('FirstService',[function () { var list = [ { name : 'Rose',age : 10 }, { name : 'Tom',age : 19 } ]; return { getList : function () { return list; } } }])
注意：angular.module('myApp')不需要注入依賴
6、下面看一下控制器整合，controller.js
angular.module('myApp') .controller('FirstCtrl',['$css','FirstService',function ($css,$service) { var self = this; $css.add('css/first.css'); self.list = function () { return $service.getList(); } }]) .controller('SecondCtrl',['$css','FirstService',function ($css,$service) { var self = this; $css.add('css/second.css'); self.list = function () { return $service.getList(); } }])
程式碼分析：
1）在控制器中注入服務依賴以及#css依賴
複製代碼 代碼如下: controller('FirstCtrl',['$css','FirstService',function ($css,$service)
2）添加css依賴路徑
複製代碼 代碼如下: $css.add('css/first.css');
注意：angular.module('myApp')不需要注入依賴
7、好了。邏輯的部分已經完成了，下面展示一下我們的樣式以及結構部分吧
first.html
<div class='first'> <h1> First Page </h1> <div ng-repeat="p in firstCtrl.list()"> {{ p.name }} == {{ p.age }} </div></div>
second.html
<div class='second'> <h1> Second Page </h1> <div ng-repeat="p in secondCtrl.list()"> {{ p.name }} == {{ p.age }} </div></div>
first.css
.first{ background-color: yellow;}.first *{ color: red;}
second.css
.second{ background-color: skyblue;}.second *{ color: green;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
