anjularjs 路由
?????? 在多視圖單頁面web應(yīng)用中，angularjs使用路由‘#+標記’來區(qū)別不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。通過一個簡單的實例來深入理解：
1.index.html
?主頁面中插入代碼：
<div ng-view></div>該div內(nèi)的html內(nèi)容會根據(jù)路由的變化而變化。
(Tips:除了基本框架需要引入外，需要引入實現(xiàn)路由的js文件： ../angular-route.min.js)
1 <!DOCTYPE html> 2 <html lang="zh-CN" ng-app="webapp"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo</title> 6 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> 7 <style> 8 body {font-size:20px;} 9 .ng-scope { 10 margin: 10px; 11 padding:10px; 12 } 13 </style> 14 </head> 15 <body> 16 17 <div ng-view></div> 18 19 20 <script src="../bower_components/angular/angular.min.js"></script> 21 <script src="../bower_components/angular-route/angular-route.min.js"></script> 22 <script src="scripts/demo.js"></script> 23 24 </body> 25 </html>?
2.ctrl1.html
? 第一個html模板文件
1 <div>I am ctrl1.html</div> 2 <div>{{Ctrl1Var}}</div> 3 <div ng-include="'views/links.html'"></div>?
3.ctrl2.html
? 第二個html模板文件
1 <div>I am ctrl2.html</div> 2 <div>{{Ctrl2Var}}</div> 3 <div ng-include="'views/links.html'"></div>?
4.ctrl3.html
? 第三個html模板文件
1 <div>I am ctrl3.html</div> 2 <div>{{Ctrl3Var}}</div> 3 <div ng-include="'views/links.html'"></div>?
5.links.html
? 默認的html模板文件
1 <ul class="list-unstyled"> 2 <li><a href="#/ctrl1">ctrl1</a></li> 3 <li><a href="#/ctrl2">ctrl2</a></li> 4 <li><a href="#/ctrl3">ctrl3</a></li> 5 <li><a href="#/nonsense">nonsense</a></li> 6 </ul>?
6.index.js
? 1） 引入ngRoute作為主應(yīng)用模塊的依賴模塊;
? 2） angularjs的config模塊用來配置路由規(guī)則，通過configAPI，請求把$routeProvider注入到我們的配置函數(shù)，然后使用$routeProvider.whenAPI來定義路由規(guī)則，when（path,object)&otherwise(object)按順序定義我們的所有路由，其中函數(shù)的兩個參數(shù)：path為URL或者URL正則規(guī)則，object則為路由配置對象，查閱資料，完整的object如下：
$routeProvider.when(url, {template: string,templateUrl: string,controller: string, function 或 array,controllerAs: string,redirectTo: string, function,resolve: object<key, function> });參數(shù)說明
?template:若ng-view中插入的只是簡單的HTML代碼，則使用
.when('/computers',{template:'這是ctrl1頁面'})??templateUrl:若在ng-view中插入HTML模板文件，則使用
$routeProvider.when('/computers', {templateUrl: 'views/strl1.html', });?controller:可以是function,string或者數(shù)組類型，這表示在當前模板上執(zhí)行的controller函數(shù)，生成新的scope.
?controllerAs:string類型，為controller指定別名。
?redirectTo:重定向的地址。
?resolve:指定當前controller所依賴的其他模塊。
?
1 angular.module("webapp",[ 2 "ngRoute" 3 ]); 4 angular.module("webapp").config(['$routeProvider',function ($routeProvider) { 5 $routeProvider.when('/ctrl1', { 6 templateUrl: 'views/ctrl1.html', 7 controller: 'Ctrl1' 8 }) 9 .when('/ctrl2', { 10 templateUrl: 'views/ctrl2.html', 11 controller: 'Ctrl2' 12 }) 13 .when('/ctrl3', { 14 templateUrl: 'views/ctrl3.html', 15 controller: 'Ctrl3' 16 }) 17 .otherwise({ 18 redirectTo: '/ctrl1' 19 }); 20 }]); 21 22 angular.module('webapp').controller('Ctrl1' , ['$scope',function($scope) { 23 $scope.Ctrl1Var = 'Ctrl1Var'; 24 }]); 25 angular.module('webapp').controller('Ctrl2' , ['$scope',function($scope) { 26 $scope.Ctrl2Var = 'Ctrl2Var'; 27 }]); 28 angular.module('webapp').controller('Ctrl3' , ['$scope',function($scope) { 29 $scope.Ctrl3Var = 'Ctrl3Var'; 30 }]);?
? 相關(guān)實例演示鏈接：http://dreammaker-8-16-qboooogle.c9users.io:8080/
?
轉(zhuǎn)載于:https://www.cnblogs.com/qbzmy/p/5788499.html
總結(jié)
以上是生活随笔為你收集整理的anjularjs 路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hive与hbase整合方式和优劣
- 下一篇： 无限循环小数POJ1930