AngularJS中的路由使用及實現代碼
前 言
本章節(jié)將為大家介紹 AngularJS 路由。AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。通過 AngularJS 可以實現多視圖的單頁Web應用(single page web application,SPA)。
1.1 Angular JS路由基礎知識講解
在AngularJS中使用路由:
1. 導入路由文件:angular-route.js
2. 在主模塊中注入"ngRoute"。
angular.module("app",["ngRoute"])
3. 將超鏈接改寫為路由格式。 --> "#/標記"
<a href="#/" rel="external nofollow" rel="external nofollow" >首頁</a> //首頁直接使用 #/ 表示 <a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a> //其他頁面"#/標記" 表示
4. 在頁面的合適位置,添加ng-view,用于承載路由打開的頁面:
<div ng-view></div> //或者 <ng-view></ng-view>
該 div 內的 HTML 內容會根據路由的變化而變化。
5. 在config配置階段,注入$routeProvider,進行路由配置:
.config(function($routeProvider){ $routeProvider .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'}) .when("/page1",{templateUrl:"page.html",controller:"ctrl1"}) .when("/page2",{templateUrl:"page.html",controller:function($scope){ $scope.text = "這是ctrl不知道是幾控制器??!" }}) .when("/page3",{templateUrl:"page.html"}) .when("/page4",{}) .otherwise({redirectTo:"/"}) })
AngularJS 模塊的 config 函數用于配置路由規(guī)則。通過使用 configAPI,我們請求把$routeProvider注入到我們的配置函數并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數按順序定義所有路由,函數包含兩個參數:
- 第一個參數是 URL 或者 URL 正則規(guī)則。
- 第二個參數是路由配置對象。
1.2.1路由設置對象
AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規(guī)則,第二個參數為路由配置對象。
路由配置對象語法規(guī)則如下:
$routeProvider.when(url,{ template:string, //在ng-view中插入簡單的html內容 templateUrl:string, //在ng-view中插入html模版文件 controller:string,function / array, //在當前模版上執(zhí)行的controller函數 controllerAs:string, //為controller指定別名 redirectTo:string,function, //重定向的地址 resolve:object<key,function> //指定當前controller所依賴的其他模塊 });
1.2.2參數說明
① template: 自定義HTML模板,會直接將這段HTML記載到ng-view中;
.when("/page3",{templateUrl:"page.html"})
② templateUrl: 導入外部的HTML模板文件。 為了避免沖突,外部的HTML應該是一個代碼片段,即只保留body以內的部分。
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
③ controller: 在當前HTML模板上,執(zhí)行的controller函數。會生出新的作用域$scope. 可以接受字符串(聲明好的controller名字),也可以直接接受函數。
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
注意: 使用ng-view打開的頁面,controller中的作用域是屬于當前頁面作用域的子作用域?。?依然符合Angular中父子作用域"能讀不能寫"的要求!
所以: 如果需要在ng-view中修改當前作用域的變量,必須把這個變量聲明為對象的屬性??!
④ redirectTo:重定向。一般用于.otherwise()中,用于重定向回首頁!
.otherwise({redirectTo:"/"})
2.1 自定指令
AngularJS允許用戶自定義指令??!
例如: <div ng-view></div> 或 <ng-view></ng-view>
1. 使用.directive()聲明一個自定義指令;
2. 定義指令時,指令名必須使用駝峰命名法; 而調用指令時,用"-"鏈接
.directive("huangGe") --> <huang-ge><huang-ge>
.directive("huangge") --> <haungge><huangge>
3. 定義指令時,對象中使用的屬性:
① template: 調用指令時,生成的模板
② restrict: 用于聲明指令允許的調用方式:
E->允許標簽名表明 A->允許屬性調用 C->允許類名調用 M->允許注釋調用
默認值為:EA
如果需要注釋調用,必須再添加一個屬性:replace:true,而且注釋調用前必須添加"directive:" eg:<!-- directive: huang-ge-->
.directive("jiangHao",function(){ return { restrict : "EACM", replace:true, template:"<h1>這是一個自定義指令</h1>", } })
3.1 實例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ overflow: hidden; } li{ width: 100px; height: 40px; text-align: center; float: left; line-height: 40px; list-style: none; cursor: pointer; } li a{ text-decoration: none; color: black; } li:hover{ background-color: yellow; } #div1{ width: 1000px; height: 500px; margin: 20px auto; border: 2px solid red; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <ul> <li><a href="#/" rel="external nofollow" rel="external nofollow" >首頁</a></li> <li><a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a></li> <li><a href="#/page2" rel="external nofollow" >page2</a></li> <li><a href="#/page3" rel="external nofollow" >page3</a></li> <li><a href="#/page4" rel="external nofollow" >page4</a></li> </ul> <div id="div1" ng-view></div> <jiang-hao></jiang-hao> <div jiang-hao></div> <div class="jiang-hao"></div> </body> <script src="js/angular.js" type="text/javascript"></script> <script src="js/angular-route.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("app",["ngRoute"]) .config(function($routeProvider){ $routeProvider .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'}) .when("/page1",{templateUrl:"page.html",controller:"ctrl1"}) .when("/page2",{templateUrl:"page.html",controller:function($scope){ $scope.text = "這是ctrl不知道是幾控制器?。? }}) .when("/page3",{templateUrl:"page.html"}) .when("/page4",{}) .otherwise({redirectTo:"/"}) }) .controller("ctrl",function($scope){ $scope.test = "這是一段測試文字!"; $scope.obj = { test:"這是一個測試對象!" } }) .controller("ctrl1",function($scope){ $scope.text = "這是ctrl1控制器!"; }) */ .directive("jiangHao",function(){ return { restrict : "EACM", replace:true, template:"<h1>這是一個自定義指令</h1>", } }) </script> </html>
效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細,相信對大家的理解和學習具有一定的參考借鑒價值,有需要的朋友可以一起來學習學習。2016-12-12Angualrjs 表單驗證的兩種方式(失去焦點驗證和點擊提交驗證)
AngularJS提供了表單驗證,但是驗證的過程交互體驗很不好,比如重設密碼,重復密碼的時候一鍵入就會提示密碼不正確?,F在小編給大家整理了兩種方法,需要的的朋友參考下吧2017-05-05詳解基于Angular4+ server render(服務端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務端渲染)開發(fā)教程 ,具有一定的參考價值,有興趣的可以了解一下2017-08-08AngularJS基礎 ng-mouseenter 指令示例代碼
本文主要介紹AngularJS ng-mouseenter 指令,這里對ng-mouseenter 指令基礎資料做了詳細整理,并附代碼實例,有需要的小伙伴可以參考下2016-08-08