MVC模式概述
MVC簡(jiǎn)介
使用Angular中MVC的優(yōu)勢(shì)和缺點(diǎn)
- 提升服務(wù)器性能
- 減少項(xiàng)目開(kāi)發(fā)時(shí)間
- 頁(yè)面渲染緩慢
- 頁(yè)面兼容性較差，不利于搜索引擎
Model組件
在Model組件中，可以存儲(chǔ)和處理數(shù)據(jù)，同時(shí)還可以在組件中自定義模板，通過(guò)模板實(shí)現(xiàn)與界面(View)層的通信和數(shù)據(jù)交互
Model組件的基本概念
在Angular的MVC模式下，Model屬于數(shù)據(jù)層，它即可以表示整個(gè)Anglar應(yīng)用的數(shù)據(jù)模型對(duì)象，也可以只表示某個(gè)實(shí)體對(duì)象
Model數(shù)據(jù)模型對(duì)象依附于作用域，無(wú)論是整個(gè)模型對(duì)象或某個(gè)實(shí)體對(duì)象，都必須被Angular的作用域以屬性的方式進(jìn)行引用，這種引用可以顯式或隱式的進(jìn)行創(chuàng)建
html:
<div ng-controller="myCtrl">
<div class="show">{{name}}</div>
<!-- 隱式的創(chuàng)建數(shù)據(jù)模型score -->
<input type="text" value="95" ng-model="score">
<div class="show">{{score}}</div>
</div>
javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
// 顯式的創(chuàng)建數(shù)據(jù)模型name
$scope.name = '張三';
}])
使用ngRepeater方式遍歷Model對(duì)象
如果創(chuàng)建的模型對(duì)象是一個(gè)數(shù)組，那么就可以使用ngRepeater來(lái)遍歷這個(gè)模型對(duì)象
html:
<div ng-controller="myCtrl">
<p ng-repeat="stu in data" class="show">
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
</p>
</div>
javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.data = [
{name: "李青思", sex: "女"},
{name: "張明明", sex: "女"},
{name: "劉曉華", sex: "男"},
{name: "陳忠忠", sex: "男"}
];
}])
Controller組件
在Angular中，MVC中的C指的是Controller組件，即應(yīng)用的控制器，本質(zhì)上它是一個(gè)JavaScript的函數(shù)，用于銜接頁(yè)面模板和邏輯代碼，并通過(guò)添加對(duì)象和行為來(lái)增強(qiáng)模板中作用域的功能
控制器的屬性和方法
在Angular中創(chuàng)建控制器是為了實(shí)現(xiàn)視圖模板與邏輯代碼的關(guān)聯(lián)，而實(shí)現(xiàn)關(guān)聯(lián)的方法是以scope.$new的方法向控制器中添加模型屬性
html:
<div ng-controller="myCtrl">
<button ng-click="changeA()">李四</button>
<button ng-click="changeB()">王二</button>
<p class="show">我的名字叫： {{name}}</p>
</div>
javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.name = '張三';
$scope.changeA = function () {
$scope.name = '李四';
}
$scope.changeB = function () {
$scope.name = '王二';
}
}])
控制器方法中的參數(shù)
在控制器中添加的方法與普通的函數(shù)一樣，都可以添加參數(shù)，在調(diào)用過(guò)程中傳遞實(shí)參
html:
<div ng-controller="myCtrl">
<div>
<input type="text" ng-model="a" value="0">
<span>{{type}}</span>
<input type="text" ng-model="b" value="0">
<span>=</span>
<span>{{result}}</span>
</div>
<div>
<button ng-click="change(1)">加法</button>
<button ng-click="change(0)">乘法</button>
</div>
</div>
javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.type = '+';
$scope.change = function (t) {
if (t) {
$scope.type = '+';
$scope.result = parseInt($scope.a) + parseInt($scope.b);
} else {
$scope.type = '*';
$scope.result = $scope.a * $scope.b;
}
}
}])
控制器中屬性和方法的繼承
Angular中的繼承與原生JavaScript有所不同，控制器中的繼承是由視圖模板的結(jié)構(gòu)來(lái)定義的。處在子節(jié)點(diǎn)的模板控制器可以繼承父節(jié)點(diǎn)所對(duì)應(yīng)的模板控制器，即可以直接訪問(wèn)父節(jié)點(diǎn)控制器中的模型屬性和方法，反之則不行。
html:
<div ng-controller="mainCtrl">
<div>
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
</div>
<div ng-controller="parentCtrl">
<div>
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
</div>
<div ng-controller="childCtrl">
<div>
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
</div>
</div>
</div>
</div>
javascript:
var app = angular.module('myApp', []);
app.controller('mainCtrl', ['$scope', function ($scope) {
$scope.name_a = '張三';
$scope.score = 60;
}]);
app.controller('parentCtrl', ['$scope', function ($scope) {
$scope.name_b = '李四';
$scope.score = 70;
}]);
app.controller('childCtrl', ['$scope', function ($scope) {
$scope.name_c = '王二';
$scope.score = 80;
}])
一般來(lái)時(shí)候，一個(gè)控制器值包括一個(gè)對(duì)應(yīng)視圖模板的業(yè)務(wù)邏輯，不應(yīng)將過(guò)多的頁(yè)面DOM操作加入到控制器中，這樣做會(huì)加大測(cè)試難度。另外，不屬于視圖業(yè)務(wù)邏輯的數(shù)據(jù)請(qǐng)求和獲取，應(yīng)盡量通過(guò)服務(wù)調(diào)用的形式來(lái)實(shí)現(xiàn)，而不是在控制器中實(shí)現(xiàn)。
View組件
在Angular的MVC模式下，V就是視圖層，即View組件。它的外形取決于視圖模板，內(nèi)部數(shù)據(jù)來(lái)源于控制器。我們可以通過(guò)ng-view指令加載和切換視圖模板，并將視圖組件通過(guò)ng-controller指令與控制器相綁定
View組件中的模板切換
Angular應(yīng)用由一個(gè)單頁(yè)來(lái)實(shí)現(xiàn)，為了在視圖模板中實(shí)現(xiàn)多個(gè)功能，需要在頁(yè)面的局部進(jìn)行刷新或切換，這樣我們就需要在視圖中引入ng-view指令，在控制器中引入$routeProvider服務(wù)
html:
<div>
<a href="#/">首頁(yè)</a> |
<a href="#/book">圖書(shū)</a> |
<a href="#/game">游戲</a>
</div>
<!-- 使用ng-view指令定義容器裝載不同的頁(yè)面內(nèi)容 -->
<div ng-view></div>
javascript:
<script src="./angular.min.js"></script>
// routeProvider沒(méi)有集成在angular的源碼中，需要單獨(dú)引入
<script src="./angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('indexController', ['$scope', function ($scope) {
$scope.title = '這是首頁(yè)';
}]);
app.controller('bookController', ['$scope', function ($scope) {
$scope.title = '這是圖書(shū)頁(yè)';
}]);
app.controller('gameController', ['$scope', function ($scope) {
$scope.title = '這是游戲頁(yè)';
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
controller: 'indexController',
template: '<div>{{title}}</div>'
})
.when('/book', {
controller: 'bookController',
template: '<div>{{title}}</div>'
})
.when('/game', {
controller: 'gameController',
template: '<div>{{title}}</div>'
})
.otherwise({
redirectTo: '/'
});
}]);
</script>
在切換視圖模板時(shí)傳遞參數(shù)
在切換視圖模板時(shí)，我們還可以傳遞參數(shù)，并且可以將一個(gè)頁(yè)面的文件名作為切換的模板地址。所以，我們可以將一個(gè)應(yīng)用分隔成多個(gè)功能頁(yè)，由它們完成不同的模塊功能
html:
<div ng-view></div>
javascript:
<script src="../angular.min.js"></script>
<script src="../angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('stuListController', ['$scope', function ($scope) {
$scope.students = students;
}]);
app.controller('stuDetailController', ['$scope', '$routeParams',
function ($scope, $routeParams) {
for (var i=0; i<students.length; i++) {
if (students[i].stuId == $routeParams.id) {
$scope.student = students[i];
break;
}
}
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'stuListController',
templateUrl: 'stuList.html'
})
.when('/view/:id', {
controller: 'stuDetailController',
templateUrl: 'stuDetail.html'
})
.otherwise({
redirectTo: '/'
});
}]);
var students = [
{stuId: 1000, name: '張明明', sex: '女', score: 60},
{stuId: 1001, name: '李青思', sex: '女', score: 80},
{stuId: 1002, name: '劉曉華', sex: '男', score: 90},
{stuId: 1003, name: '陳忠忠', sex: '男', score: 70}
];
</script>
