MVC模式概述
MVC简介
使用Angular中MVC的优势和缺点
- 提升服务器性能
- 减少项目开发时间
- 页面渲染缓慢
- 页面兼容性较差，不利于搜索引擎
Model组件
在Model组件中，可以存储和处理数据，同时还可以在组件中自定义模板，通过模板实现与界面(View)层的通信和数据交互
Model组件的基本概念
在Angular的MVC模式下，Model属于数据层，它即可以表示整个Anglar应用的数据模型对象，也可以只表示某个实体对象
Model数据模型对象依附于作用域，无论是整个模型对象或某个实体对象，都必须被Angular的作用域以属性的方式进行引用，这种引用可以显式或隐式的进行创建
html:
{{name}}
{{score}}
javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
// 显式的创建数据模型name
$scope.name = '张三';
}])
使用ngRepeater方式遍历Model对象
如果创建的模型对象是一个数组，那么就可以使用ngRepeater来遍历这个模型对象
html:
{{stu.name}}
{{stu.sex}}
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:
我的名字叫： {{name}}
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:
{{type}}
=
{{result}}
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:
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
{{name_a+'/'+name_b+'/'+name_c+'/'+score}}
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:
javascript:
// routeProvider没有集成在angular的源码中，需要单独引入
在切换视图模板时传递参数
在切换视图模板时，我们还可以传递参数，并且可以将一个页面的文件名作为切换的模板地址。所以，我们可以将一个应用分隔成多个功能页，由它们完成不同的模块功能
html:
javascript: