2018-07-04发表2024-11-18更新Development / JavaScript9 分钟读完 (大约1385个字)

AngularJS框架简介

MVC模式

M：Model是数据的表述，Model并不是真正的数据，而是数据的接⼝;
V：View是Model的表现层，在Web应⽤用中表现为在浏览器中看到的⻚面;
C：Controller用来控制Model和View之间的数据流动。 (由于MVC模式的松耦合性，可以认为它是目前开发C/S和B/S
应⽤的最佳模式)

AngularJS下的MVC模式

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

主要体现在:

在AngularJS中，作用域$scope和$rootScope充当Model层
在AngularJS中，html和指令directive充当View层
在AngularJS中，控制器controller充当Controller层

AngularJS

AngularJS简介

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

AngularJS第一个应⽤

通过script标签将AngularJS引⼊到Web应⽤中

1 2	<script src=“https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js”></script>

定义AngularJS模块，定义模块控制器，为控制器注⼊$scope，$scope充当数据模型的作⽤，定义在$scope上的数据可在视图中直接访问

angular.module('myApp', [])
  .controller('myCtrl', functi ** on ** ($scope)
{
  $scope.hello = 'hello world';
}
)
;

在html中，通过指令（ng-app、ng-controller）实例化AngularJS应⽤和控制器，从⽽使视图可以引⽤数据模型中的值


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

<!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中

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

AngularJS框架简介

https://www.borgor.cn/posts/5e5f1d48.html

作者

Cyrusky

发布于

2018-07-04

更新于

2024-11-18

许可协议

#开发

AngularJS框架简介

MVC模式

AngularJS下的MVC模式

AngularJS

AngularJS简介

AngularJS第一个应⽤

AngularJS模块和作⽤域

AngularJS控制器、指令、服务

作者

发布于

更新于

许可协议

评论

分类

目录

最新文章

归档

标签