為什么需要MVC？
- 代碼規(guī)模越來(lái)越大，切分職責(zé)是大勢(shì)所趨
為了復(fù)用，很多邏輯是一模一樣的，這個(gè)時(shí)候會(huì)把他抽出來(lái)形成公共的代碼，這個(gè)時(shí)候如果不適應(yīng)MVC這樣的手段是沒(méi)有辦法把這些邏輯抽出來(lái)。
為了后期維護(hù)的方便，修改一塊功能不影響其他功能
MVC只是手段，終極目的是模塊化和復(fù)用。
前端MVC的困難在哪里
如何使用Controller
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- ng-controller控制器 -->
<div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
function HelloAngular($scope) {
$scope.greeting = {
text: 'Hello'
};
}
ng-controller控制器是由一個(gè)函數(shù)來(lái)充當(dāng)?shù)模?br> AngularJS是通過(guò)ng-controller這樣一個(gè)指令來(lái)實(shí)現(xiàn)他的控制器的，
控制器基本思想和理論
MVC是模型-視圖-控制器的意思，在一般經(jīng)典的狀態(tài)下，控制器是負(fù)責(zé)和視圖進(jìn)行雙向交互，也負(fù)責(zé)跟數(shù)據(jù)模型進(jìn)行雙向交互，但是視圖和數(shù)據(jù)模型之間是沒(méi)有交互的，
在最簡(jiǎn)單的情況下，一個(gè)控制器是可以控制多個(gè)視圖的，但是這樣一來(lái)會(huì)有個(gè)問(wèn)題，如果視圖1和視圖2沒(méi)有任何的關(guān)系，或者說(shuō)根本沒(méi)有業(yè)務(wù)上的的邏輯關(guān)系，這個(gè)時(shí)候控制器的角色就會(huì)很尷尬，
因?yàn)槲覀儠?huì)把視圖1和視圖2的代碼放到控制器，控制器就成了大雜燴。
第一種這種實(shí)現(xiàn)方式實(shí)際上在一些小型的項(xiàng)目中可以這樣去實(shí)現(xiàn)，很顯然是沒(méi)有辦法去應(yīng)對(duì)大型項(xiàng)目，很自認(rèn)就有了第二種方式
也就是說(shuō)我們一個(gè)控制器只負(fù)責(zé)跟一個(gè)視圖進(jìn)行雙向交互，這兩個(gè)試圖如果他們需要公用數(shù)據(jù)模型，那么我們就在控制器里面來(lái)共同使用同一份數(shù)據(jù)模型就可以了，這是改進(jìn)的MVC實(shí)現(xiàn)
這個(gè)時(shí)候又出現(xiàn)一個(gè)問(wèn)題如果我們控制器1和控制器2里面會(huì)出現(xiàn)相同的內(nèi)容，這個(gè)時(shí)候應(yīng)該怎么做
有人會(huì)說(shuō)我可以把他抽出來(lái)實(shí)現(xiàn)一個(gè)同用的控制器繼承通用的控制器這樣就能讓公共部分放到公共的控制器里，這種方式是部隊(duì)的
我們可以通過(guò)Service去做，這個(gè)是AngularJS官方的實(shí)現(xiàn)方式，首先會(huì)把公用的東西抽成一個(gè)服務(wù)讓控制器去調(diào)用他，而不是讓控制器去繼承，
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="Commoncontroller">
<!-- ng-controller控制器 -->
<div ng-controller="Controller1">
<p>{{greeting.text}},Angular</p>
<button ng-click="test1()">test1</button>
<button ng-click="commonFn()">通用</button>
</div>
<div ng-controller="Controller2">
<p>{{greeting.text}},Angular</p>
<button ng-click="test2()">test2</button>
<button ng-click="commonFn()">通用</button>
</div>
<button ng-click="commonFn()">通用</button>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC3.js"></script>
</html>
function Commoncontroller($scope) {
$scope.commonFn = function(){
alert("這里是通用功能")
}
}
function Controller1($scope) {
$scope.greeting = {
test:'hello1'
}
$scope.test1=function(){
alert("test1")
}
}
function Controller2($scope) {
$scope.greeting = {
test:'hello2'
}
$scope.test2=function(){
alert("test2")
}
}
