- 為什么在前端也需要MVC
1、代碼規模越來越大，切分職責是大勢所趨
2、為了復用
3、為了后期維護方便
MVC的目的是為了模塊化和復用
- 前端實現MVC的困難
1、操作DOM必須等整個頁面加載完
2、多個js如果出現依賴，需要程序員自己解決
3、js的原型繼承
- Controller
需求：有一些功能，在各個控制器中都會用到，怎么辦？
1 <!DOCTYPE html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script> 7 <script type="text/javascript" src="demo02.js"></script> 8 </head> 9 <body> 10 <div ng-controller="CommonController"> 11 <div ng-controller="Controller1"> 12 <p>{{greet.text}},AngularJs</p> 13 <button ng-click="test1()">test1</button> 14 </div> 15 <div ng-controller="Controller2"> 16 <p>{{greet.text}},AngularJs</p> 17 <button ng-click="test2()">test2</button> 18 </div> 19 <button ng-click="commonFn()">通用</button> 20 </div> 21 </body> 22 </html>
1 /** 2 * Created by sherry on 16/8/3. 3 */ 4 5 var myApp = angular.module("myApp",[]); 6 myApp.controller("CommonController",function ($scope) { 7 $scope.commonFn = function () { 8 alert("這是通用功能"); 9 } 10 }); 11 myApp.controller("Controller1",function ($scope) { 12 $scope.greet = { 13 text:"Hello1" 14 }; 15 $scope.test1 = function () { 16 alert("test1"); 17 } 18 }); 19 myApp.controller("Controller2",function ($scope) { 20 $scope.greet = { 21 text:"Hello2" 22 }; 23 $scope.test2 = function () { 24 alert("test2"); 25 } 26 });
對於button，不管其隸屬於哪個控制器，只要是在 CommonController 內的，就都能被調用 commonFn 方法就變成了兩個“子”控制器的公共方法
如下：
<div ng-controller="CommonController"> <div ng-controller="Controller1"> <p>{{greet.text}},AngularJs</p> <button ng-click="test1()">test1</button> </div> <div ng-controller="Controller2"> <p>{{greet.text}},AngularJs</p> <button ng-click="test2()">test2</button> <button ng-click="commonFn()">通用</button> </div> </div>
但是：AngularJs中並不推薦這么做，AngularJs的最佳實踐，是把公共部分抽取成Service，被Controller調用
Controller使用中的注意點：
1、不要試圖去復用Controller，一般控制器只負責一小塊視圖【一般一個Controller負責的是一個業務邏輯，除非業務邏輯切分得足夠細，否則不具備復用的可能】
2、不要在Controller中操作DOM，這不是控制器的職責【推薦將DOM操作使用指令來做，Controller中操作DOM的速度是非常低的】
3、不要在Controller里面做數據格式化，AngularJs有很好的表單控件
4、不要在Controller里面做數據過濾操作，AngularJs有$filter服務
5、一般來說，Controller是不會相互調用的，控制器之間的交互通過事件進行
- Model
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../../jslib/angular.min-1.5.8.js"></script> </head> <body> <input type="text" placeholder="輸入..." ng-model="name"> <p>{{name}}</p> </body> </html>
通過 ng-model 標簽，定義一個數據模型，實現雙向綁定
- View
利用 driective 實現View的復用，就是定義一個指令，設置一個模板
AngularJs中的MVC，是借助$scope（作用域）實現的
- AngularJs作用域
$rootScope，根作用域，如果屬性在當前控制器的$scope中找不到，就會依次向上去尋找，這點很像JavaScript中的原型繼承
$scope是一個POJO
$scope提供了一些工具方法 $watch/$apply
$scope是表達式的執行環境
$scope是一個樹型結構，與DOM標簽平行
子$scope會繼承父$scope上的屬性和方法
每個AngularJs只有一個根$scope對象（一般位於ng-app上）
$scope可以傳播事件，類似DOM事件，可以向上或向下傳播
$scope不僅僅是MVC的基礎，也是數據雙向綁定的基礎
使用 angular.element($0).scope() 獲取當前$scope進行調試