回顧
- 自定義指令
- 登錄后獲取登錄信息session
- 首先在登錄驗證的時候保存一個user
- 在學生管理頁面中運用ajax調用獲取到登錄的用戶信息
- 對注銷按鈕添加點擊事件：調用ajax在表現層給user賦值為null
Angular實現單頁應用
angular中實現單頁應用是運用了UI-router插件
- 路由
- 后台中的路由是用來配置路徑，分配請求的方法；
- angular中的路由也是同樣的原理，通過導入ui-router插件，在main.js中配置不同的路由
- 實現方法
-
先導入ui-router文件
var mainApp = angular.module("mainApp",["ui-router","regApp","loginApp","studentApp"]); mainApp.config(function($urlRouterProvider,$stateProvider){ $urlRouterProvider.when("","/reg"); $stateProvider.state("reg",{ url:"/reg", //路由匹配的路徑 templateUrl:"modules/reg/reg.html", //文件模板路徑 controller:"RegController" } } //在html中的代碼 <body> <div ui-view><div> <body>
-
Angular內部實現原理
angular的實現原理主要是利用了三個對象：$watch,$digest,$apply;
-
$watch 監聽（列表）對象（類數組）
-
所有頁面上綁定的屬性都會放在監聽列表中，並不是所有$scope中的屬性都會放在監聽列表中，只有頁面上綁定的才會放入監聽列表。
-
監聽列表的作用就是放置所有綁定在頁面上的屬性
1 $scope.$watch("name",function(a,b){ 2 console.log("name is changed"); 3 }); 4 //里邊兩個參數，a是修改之后的值，b是修改之前的值
-
-
$digest 循環對象
- 循環監聽列表中的數據是否發生變化，則把$watch中的所有數據拿來循環，一旦有監聽對象發生變化就調用回調函數進行DOM操作。
- 直到沒有數據變化為止。
- 為了防止無限循環，在設計angular的過程中設定了循環次數最多10次，如果超過10次則會報錯。
- 這種機制就要求不要進行過多的數據聯動。
- 這個機制有一個前提：循環列表中的對象在Angular的上下文環境中。
-
用$apply可以讓代碼回到Angular的上下文環境
1 setTimeout(function(){ 2 $scope.$apply(function(){ 3 $scope.name = "changed"; 4 }); 5 }, 1000);