190323&Angular的核心概念有哪些?

Angular的核心概念有哪些?

其实说实话，对于使用了Angular这么久的我来说，14年2月开始到现在吧。差不多将近5年了。通常来讲，用一个技术5年，不说成为一个特别牛逼的大神吧，最起码问下原理应该二话不说，噼里啪啦的说一堆，然后解释的还是有理有据，有条有理的才对，而我呢，一时竟哑口无言。真是为自己感到脸红。所以呢，还是太浮躁，需要好好静下心来沉淀沉淀了。

声明一下书写的范围。

这篇文章，介绍的主要是AngularJS版本的，也就是1.*版本的。Angular2及其之后的版本没深入使用过，没有发言权，也就不在本篇讨论了。

先说下自己做过的印象比较深的功能。

刨除那些增删改查crud，还有分页等，跟技术关联不是很大的业务功能，自己做过的技术点，主要有 过滤器，指令，框架，以及数据结构和算法相关的。

1.1 过滤器

• 数据字典

1.2 指令相关

• 自定义千分符指令
• 图片上传

跟第三方库有关系的。封装第三方库为Angular指令。

• jedate
• 滑动解锁
• 图片预览
• pdf预览

1.3 框架相关

• 路由配置
• 权限控制
• websocket实时通信

1.4 数据结构和算法相关

• 复选框的反选
• 高级时间控件

核心概念

其实从上面做过功能的具体实践来看，Angular的核心概念有过滤器，指令等，当前从全局来看肯定不止这2个。具体来说，Angular的核心概念有这么几个。

• 过滤器
• 指令
• 依赖注入DI
• MVC
• 数据绑定
• 模块化
• 服务
• 测试
• Scope对象
• 监听机制
• 事件系统
• 模板
• 模型
• 编译器
• 控制器
• 表达式
• 注入器

好，一个概念一个概念来介绍。

过滤器

过滤器是用来对模型数据进行格式化或对数组元素进行筛选，或者对某个模型值进行预处理。如格式化为美元、日期等。框架自己提供一些过滤器，如排序、字符串内容筛选。我们也可以自定义过滤器。

指令

指令是ng为HTML补充的语法扩展，用于增强HTML的表现力。像我们之前使用的ng-controller、ng-model等都属于指令。你也可以自定义指令。ng内部包含了一个强大的DOM解析引擎，所以这些新的标签或是标签属性可以像使用原生HTML那样很好的工作。

用于将模型的数据绑定到视图上。

依赖注入

通过依赖注入，ng想要推崇一种声明式的开发方式，即当我们需要使用某一模块或服务时，不需要关心此模块内部如何实现，只需声明一下就可以使用了。在多处使用只需进行多次声明，大大提高可复用性。

控制器所使用到的service服务可以由Angular的injector自动注入。

玩过Spring的童鞋都知道，Spring的IoC容器也实现了依赖注入，Spring注入的方式有构造注入，getter/setter注入和反射注入，而Angular使用的注入方式是构造注入，即通过参数的方式传入到控制器的逻辑函数中。Angular本身提供了多种service，例如$scope,$window,$location等等，我们也可以通过service函数自定义服务。

MVC

写过后端的都知道什么是MVC，一种常用的Web设计模式，将模型（Model），视图（View），控制器（Controller）分离的一种思想，这里不累述。Angular实现了纯前端的MVC，使得前端应用更加工程化，模块之间耦合性小。

代码规模越来越大，切分职责大势所趋。
为了复用抽出逻辑
为了后期维护，修改一块功能不影响其他内容

MVC只是手段，终极目标是模块化和复用

数据绑定

首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用js拼接出很长的HTML字符串，然后append到页面中，这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个script标签中当作模板，然后按需要取来使用。在ng中，模板十分简单，它就是我们页面上的HTML代码，不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的功能，这些指令可以让你把模板和数据巧妙的绑定起来。

绑定这个东西可是ng中的大功臣了。在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：var v = KaTeX parse error: Expected 'EOF', got '#' at position 3: (‘#̲id’).val();(‘#id’).html(str);即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。

双向数据绑定，实现视图与模型的双向绑定，即任意一方发生变化，都会同步到另一方。 这种思想使得用惯Jquery的童鞋在刚接触Angular的时候，会感到一些不适应，因为双向数据绑定使我们可以完全抛弃直接去操作DOM的做法，颠覆了传统的DOM操作。举个例子，如果我们要改变页面上某个的内容。使用Jquery的话我们的做法无非是获取这个的DOM，然后修改DOM的text内容。而使用Angular，我们只需要修改这个所绑定的模型数据，就可以自动更新。

模块化

• angularjs的module

AngularJS可以让我们写出高内聚性的app，通过相关的控制器，服务，指令组织在模块中，每个模块都有相应的唯一的注入器，管理配置模块的内部组件。

服务

服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通信，并且能保证数据的一致性。
服务是一个单例对象，在每个应用中只会被实例化一次，并且是延迟加载的（需要时才会被创建）。服务提供了把与特定功能相关联的方法集中在一起的接口。
AngularJS提供了一些内置服务，在任何地方使用它们的方式都是统一的。同时，为复杂应用创建我们自己的服务也是非常有用的。
在AngularJS中创建自己的服务是非常容易的，只需要注册这个服务即可。服务被注册后，AngularJS编译器就可以引用它，并且在运行时把它当作依赖加载进来。服务名称的注册表使得在测试中伪造和剔除相互隔离的应用依赖变得非常容易

测试

1）单元测试Unit Testing
我们可以专注于构建我们的测试来隔离具体、单独组件的代码。这种方法被称为“单元测试”，在不同阶段、不同条件下、以不同的输入来测试各种特定单元的代码。
单元测试专门用于测试小型、独立的代码单元，单个函数，或者较小的带有功能的交互。
单元测试的麻烦在于把逻辑隔离成小块，这样我们才能测试它。

2）端到端测试E2E Testing
对应于进行端到端测试，也即黑盒测试。在端到端测试中，我们测试应用的视角是：作为最终用户，对系统的底层实现一无所知。这种方法非常适合测试大型应用的功能。
端到端测试适合测试页面上的用户交互，无需手动刷新页面。端到端测试意义重大，因为它映射了用户在使用我们应用时的真实体验。

Scope对象

AngularJS中的 $scope 对象在这里就是要将 域模型 暴露给视图（模板）。只需把属性设置给 scope 实例，就可以在模板渲染时得到这个值。

Scopes（作用域）也可以针对特定的视图来扩展数据和特定的功能。只要在 scope 实例上定义一些函数就能将特定的 UI 逻辑暴露给模板了。

监听机制

Angular的模型数据发生变化时，所绑定的视图也会随之发生变化。这是由Angular的监听机制来实现的。
Angular的监听机制由三个函数来实现：$watch(), $digest(), $apply()

事件系统

层级关系中的作用域可以使用 event bus（一种事件系统）。AngularJS可以在作用域层级中传播具名的装备齐全的事件。事件可以从任何一个作用域中发出，然后向上（$emit）和向下（$broadcast）四处传播。

AngularJS核心服务和指令使用这种事件巴士来发出一些应用程序状态变化的重要事件。比如，我们可以监听 $locationChangeSuccess 事件（由 $rootScope 实例发出），然后在任何 location（浏览器中就是URL）变化的时候都会得到通知，如下所示：

模板

模板就是HTML和CSS编写的片段，用来展现应用的视图。您可以通过实现AngularJS编译器识别的指令(directive)， 扩展HTML的标签或属性

模型

AngularJS 的模型就是那些普通的 JavaScript 对象。我们不必被强迫去继承一些框架的基础类，也不必以某种特殊的方式来初始化模型对象。

使用任何现有的，纯JavaScript类或对象，就跟在模型层一样的去使用它们也是可以的。同时也没有被限制说只能使用最原始的值来做模型属性（任何合法的JavaScript 对象或数组都可以使用）。要把模型暴露给 AngularJS，你只需把它赋值给 $scope 的属性即可

熟悉MVC框架的人都知道Model就是数据，AngularJS通过作用域(scope)保持数据模型与视图的双向同步。如果一方改变，另一方会自动随之更新状态。 模型中的数据一般为Javascript的对象，数组或基本类型。

编译器

编译器，AngularJS在页面加载完DOM之后会对HTML预处理，编译器负责解析模板(template)和初始化指令和表达式。

控制器

控制器的首要任务就是初始化scope对象，封装了业务逻辑。

不要试图去复用Controller，一个控制器一般只负责一小块试图
不要在Controller里操作DOM，这不是控制器的职责
不要在Controller里面做数据格式化，ng有很好的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行

表达式

通过AngularJS表达式可以访问作用域内的变量或函数。

注入器

注入器，类似于Spring容器，AngularJS为每个应用(ng-app)提供唯一的注入器，用于缓存对象实例。

最后

虽然说，总结了这么一篇，就能对Angular的核心概念了如指掌了吗？
答案肯定是否定的，此篇只是大概的说了一下里面的核心概念。

如若真要好好研究，那肯定少不了。

• angular实现机制
• angular的实践篇 xxx

原理和实践都慢慢，到了快溢出来的时候，那时候才能算是好好的入门，站在门内了。

不禁对自己说：加油吧，骚年，前方路途夕漫漫！~~

参考

AngularJS核心概念
AngularJS基础概念与核心原理
博弈AngularJS讲义(2) - 核心概念
精通使用AngularJS开发Web App
走进AngularJs(一)angular基本概念的认识与实战
angularJs 4大核心特性+事例