AngularJS框架简介

MVC模式

  • MModel是数据的表述,Model并不是真正的数据,而是数据的接⼝;
  • VViewModel的表现层,在Web应⽤用中表现为在浏览器中看到的⻚面;
  • CController用来控制ModelView之间的数据流动。 (由于MVC模式的松耦合性,可以认为它是目前开发C/SB/S应⽤的最佳模式)

AngularJS下的MVC模式

AngularJS通过MVC模式增强了了HTML,即AngularJS通过指令扩展了HTML,并通过表达式绑定数据到HTML

主要体现在:

  • AngularJS中,作用域$scope$rootScope充当Model
  • AngularJS中,html和指令directive充当View
  • AngularJS中,控制器controller充当Controller

AngularJS

AngularJS简介

  1. AngularJS是一个Web应用开发框架,主要用于构建单⻚面Web应⽤
  2. AngularJS完全使用JavaScript编写,可直接在浏览器端运行
  3. AngularJS基于MVC模式设计,实现应⽤逻辑、数据模型和视图的解耦,从⽽而降低了了构建复杂应⽤的难度
  4. 开发者⽆需关注DOM的操作(与jQuery的不不同之处),从⽽专注于业务逻辑的处理。
  5. 数据双向绑定

AngularJS第一个应⽤

  1. 通过script标签将AngularJS引⼊到Web应⽤中
1
<script src=“https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js”></script>
  1. 定义AngularJS模块,定义模块控制器,为控制器注⼊$scope$scope充当数据模型的作⽤, 定义在$scope上的数据可在视图中直接访问
1
2
3
4
angular.module('myApp', [])
.controller('myCtrl', functi**on**($scope) {
$scope.hello = 'hello world';
});
  1. html中,通过指令(ng-appng-controller)实例化AngularJS应⽤和控制器,从⽽使视图可以引⽤数据模型中的值
1
2
3
<div ng-controller="myCtrl">
<p>{{ hello }}</p>
</div>

AngularJS模块和作⽤域

  • 模块:

    AngularJS,模块是定义应⽤的最佳⽅式 模块是AngularJS应⽤程序中的顶层组件

    ⼀个AngularJS应⽤可包含多个模块

  • 使⽤模块的好处:

    1. 保持全局命名空间的整洁
    2. 易于在不同应⽤间复⽤代码(通过依赖注⼊)
    3. 使应⽤能以任意顺序加载代码的各部分(调整依赖注⼊的顺序来控制代码的加载)
  • 模块定义⽅法:

    1
    angular.module(name, requires, config)

    -name:模块的名称

    -requires:模块所依赖的其他模块的集合

    -config:模块的配置,等效于module.config()⽅法 注:

  • 注意:

    1. 创建⼀个模块时,必须同时指定namerequires参数,当requires为空时,传⼊⼀个空数组
    2. angular.module(name)表示查找之前已创建的name模块,当查找的模块不存在时,抛出错误
    3. ng-app指令⽤于将⼀个模块设置为AngularJS应⽤的主模块,起初始化作⽤
  • 示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <head>
<title>AngularJS App</title> </head>
<body>
<div ng-controller="myCtrl">
<p>{{ hello }}</p>
<p>{{ testService }}</p>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script>
/**
* 通过模块将不同的业务逻辑封装在不同的命名空间中
* 通过依赖注⼊将模块注⼊到另⼀模块中,从⽽可以在另⼀模块中使⽤该模块中定义的服务
**/
angular.module('myApp', ['testApp'])
.controller('myCtrl', function($scope, testService) {
$scope.hello = 'hello world';
$scope.testService = testService;
});
angular.module('testApp', [])
.factory('testService', function() {
return {
name: 'ryan'
};
});
</script>
</body>
</html>
  • 作⽤域(scope):

    作⽤域是构成AngularJS应⽤的核⼼基础,在AngularJS中表现为$scope对象

    作⽤域是和数据模型相关联的,同时也是表达式执⾏的上下⽂

    $scope可以进⾏嵌套,因此可以引⽤⽗级$scope中的属性

    AngularJS的作⽤域是基于动态绑定的,因此可以在视图修改数据时⽴即更新$scope,也可以 在$scope发⽣变化时⽴即重新渲染视图,即AngularJS的双向数据绑定

    AngularJS启动并⽣成视图时,会将根ng-app元素同$rootScope进⾏绑定,$rootScope是所有 $scope对象的最上层

  • $scope的⽣命周期

    $scope对象的⽣命周期有4个阶段:

    1. 创建

      在创建控制器或指令时,AngularJS调⽤$injector创建⼀个新的作⽤域,并在这个新建的控制器或指令运⾏时将作⽤域传递进去

    2. 链接

      AngularJS开始运⾏时,所有$scope对象都会附加或链接到视图中,这些$scope对象将会注册当AngularJS应⽤上下⽂发⽣变化时需要运⾏的函数

    3. 更新

      当事件循环执⾏时,它通常执⾏在$rootScope对象上,每个⼦作⽤域都执⾏⾃⼰的脏值检测,每个监控函数都会检查变化,如果检测到任意变化, $scope对象就会触发制定的回调函数

    4. 销毁

      当⼀个$scope在视图中不再需要时,这个作⽤域将会清理和销毁⾃⼰

AngularJS控制器、指令、服务

  • 控制器(controller

    AngularJS的控制器本质上是⼀个函数,其作⽤是通过作⽤域($scope)向视图提供数据和逻 辑,以增强视图

    控制器应保持尽量精简,不适合执⾏DOM操作、数据格式化和数据处理等,DOM操作应放在directive中、数据格式化应放在filter中、数据处理应封装到service

    控制器可以进⾏嵌套,内层控制器的作⽤域继承⾃外层作⽤域