第2章 模块化
使用AngularJS构建应用时是以模块化的方式组织的,即将整个应用划分成多个小模块,各个模块有各自的职责,最终实现完整的应用。
2.1 定义应用
- 通过为任一HTML标签添加ng-app属性,可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分。
- 格式:
<html lang="en" ng-app="App">
2.2 定义模块
AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中angular.module()方法用来定义一个模块。
格式:
var app = angular.module('app', []);
注:应用(App)其本质也是一个模块(一个比较大的模块)。
2.3 定义控制器
控制器(Controller)作为连接模型(Model)和视图(View)的桥梁存在,所以当我们定义好了控制器以后也就定义好了模型和视图。
- 格式:
App.controller('DemoController', ['$scope', function ($scope) {
//$scope是一个空的对象,此对象就是一个Model
$scope.name = '小明';
$scope.school = '传智播客';
$scope.courses = [
'MVC',
'指令',
'模块化'
];
}]);
- 模型(Model)数据是要展示到视图(View)上的,所以需要将控制器(Controller)关联到视图(View)上,通过为HTML标签添加ng-controller属性并赋值相应的控制器(Controller)的名称,就确立了关联关系。