MVC模式概述
MVC簡介
使用Angular中MVC的優(yōu)勢和缺點
- 提升服務器性能
- 減少項目開發(fā)時間
- 頁面渲染緩慢
- 頁面兼容性較差，不利于搜索引擎
Model組件
在Model組件中，可以存儲和處理數據芦圾，同時還可以在組件中自定義模板澈段，通過模板實現與界面(View)層的通信和數據交互
Model組件的基本概念
在Angular的MVC模式下，Model屬于數據層，它即可以表示整個Anglar應用的數據模型對象亮元，也可以只表示某個實體對象
Model數據模型對象依附于作用域灯节，無論是整個模型對象或某個實體對象循头，都必須被Angular的作用域以屬性的方式進行引用，這種引用可以顯式或隱式的進行創(chuàng)建
html:
<div ng-controller="myCtrl">
<div class="show">{{name}}</div>
<!-- 隱式的創(chuàng)建數據模型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)建數據模型name
$scope.name = '張三';
}])
使用ngRepeater方式遍歷Model對象
如果創(chuàng)建的模型對象是一個數組炎疆，那么就可以使用ngRepeater來遍歷這個模型對象
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組件，即應用的控制器形入，本質上它是一個JavaScript的函數全跨，用于銜接頁面模板和邏輯代碼，并通過添加對象和行為來增強模板中作用域的功能
控制器的屬性和方法
在Angular中創(chuàng)建控制器是為了實現視圖模板與邏輯代碼的關聯亿遂，而實現關聯的方法是以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 = '王二';
}
}])
控制器方法中的參數
在控制器中添加的方法與普通的函數一樣浓若，都可以添加參數，在調用過程中傳遞實參
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é)點的模板控制器可以繼承父節(jié)點所對應的模板控制器，即可以直接訪問父節(jié)點控制器中的模型屬性和方法耳舅，反之則不行碌上。
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;
}])
一般來時候，一個控制器值包括一個對應視圖模板的業(yè)務邏輯浦徊，不應將過多的頁面DOM操作加入到控制器中绍赛，這樣做會加大測試難度。另外辑畦，不屬于視圖業(yè)務邏輯的數據請求和獲取吗蚌，應盡量通過服務調用的形式來實現，而不是在控制器中實現纯出。
View組件
在Angular的MVC模式下蚯妇，V就是視圖層敷燎，即View組件。它的外形取決于視圖模板箩言，內部數據來源于控制器硬贯。我們可以通過ng-view指令加載和切換視圖模板，并將視圖組件通過ng-controller指令與控制器相綁定
View組件中的模板切換
Angular應用由一個單頁來實現陨收，為了在視圖模板中實現多個功能饭豹，需要在頁面的局部進行刷新或切換，這樣我們就需要在視圖中引入ng-view指令务漩，在控制器中引入$routeProvider服務
html:
<div>
<a href="#/">首頁</a> |
<a href="#/book">圖書</a> |
<a href="#/game">游戲</a>
</div>
<!-- 使用ng-view指令定義容器裝載不同的頁面內容 -->
<div ng-view></div>
javascript:
<script src="./angular.min.js"></script>
// routeProvider沒有集成在angular的源碼中拄衰，需要單獨引入
<script src="./angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('indexController', ['$scope', function ($scope) {
$scope.title = '這是首頁';
}]);
app.controller('bookController', ['$scope', function ($scope) {
$scope.title = '這是圖書頁';
}]);
app.controller('gameController', ['$scope', function ($scope) {
$scope.title = '這是游戲頁';
}]);
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>
在切換視圖模板時傳遞參數
在切換視圖模板時，我們還可以傳遞參數饵骨，并且可以將一個頁面的文件名作為切換的模板地址翘悉。所以，我們可以將一個應用分隔成多個功能頁居触，由它們完成不同的模塊功能
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>
