Angular中的MVC模式
2016-07-24 本文已影响330人
阿振_sc
MVC模式概述
MVC简介
使用Angular中MVC的优势和缺点
- 提升服务器性能
- 减少项目开发时间
- 页面渲染缓慢
- 页面兼容性较差，不利于搜索引擎
Model组件
在Model组件中，可以存储和处理数据，同时还可以在组件中自定义模板，通过模板实现与界面(View)层的通信和数据交互
Model组件的基本概念
在Angular的MVC模式下，Model属于数据层，它即可以表示整个Anglar应用的数据模型对象，也可以只表示某个实体对象
Model数据模型对象依附于作用域，无论是整个模型对象或某个实体对象，都必须被Angular的作用域以属性的方式进行引用，这种引用可以显式或隐式的进行创建
html:
<div ng-controller="myCtrl">
<div class="show">{{name}}</div>
<!-- 隐式的创建数据模型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) {
// 显式的创建数据模型name
$scope.name = '张三';
}])
使用ngRepeater方式遍历Model对象
如果创建的模型对象是一个数组，那么就可以使用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中创建控制器是为了实现视图模板与逻辑代码的关联，而实现关联的方法是以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有所不同，控制器中的继承是由视图模板的结构来定义的。处在子节点的模板控制器可以继承父节点所对应的模板控制器，即可以直接访问父节点控制器中的模型属性和方法，反之则不行。
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;
}])
一般来时候，一个控制器值包括一个对应视图模板的业务逻辑，不应将过多的页面DOM操作加入到控制器中，这样做会加大测试难度。另外，不属于视图业务逻辑的数据请求和获取，应尽量通过服务调用的形式来实现，而不是在控制器中实现。
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>
