前言

个人认为自顶而下学习各种开发知识有事半功倍的效果。第一步,理解目标知识的核心思想和概念,形成整体的认识,知道其出现的背景和采用的解决方案;第二步,学习相关基础语法;第三步,结合使用手册进行实际项目开发,同时不断体会其核心思想,基本就可以把该技术转化为自己的知识。

目前关于 Angular 的教程各种各样,本文是学习 Angular 过程中的个人对其核心思想和概念的理解,如有错误之处欢迎指出。

核心思想

目前比较火的几个 JavaScript 开发框架有 Angular, Vue, 和 React,这些框架都是在提供一个方便操作HTML DOM元素(HTML DOM 简介)的工具。不用这些框架直接用 JavaScript 操作完全可行,只是比较繁琐,这些框架把基本的轮子都给实现了,用起来相对比较方便而已。因此,这些框架的核心功能就是如何便捷地操作HTML DOM元素,并因此衍生了很多概念,如Angular的指令(directive)、模型(ng-model)、Scope、controller等,都是围绕着操作 DOM 服务。

核心概念

MVC (浅谈 MVC、MVP 和 MVVM 架构模式)永远是软件开发的核心思想,Angular 也依赖于该思想。对应于MVC的三个模块,我将Angular的概念划分如下:Scope是数据(Model),包含了数据及其作用域的概念,HTML是视图(View)当然也可以加上CSS一起扮演视图的角色,而扮演控制器(Controller)角色的组件比较多,如controller、service、factory、provider等各种JavaScript函数,这些组件对数据和视图进行操作。指令将普通的 HTML 与 Angular 各种对象连接起来。

HTML DOM & 指令

HTML DOM 指 HTML 中的各种元素,是基本概念,只是目前普遍结合一些常用的框架以美化视图,同样是减少造轮子的花销,比如 Bootstrap 等。

指令是将 Angular 各种对象 和 HTML DOM 连接的桥梁,是网页动态性和响应能力的基础,指令是绑定在DOM元素上的函数,它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM等等。常见的指令如:ng-app、ng-model、、ng-init、ng-click等等等等,可以参考:https://docs.angularjs.org/guide/directive

当一个 Angular 应用启动,Angular 编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始),解析HTML,寻找这些指令属性函数。当在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

Scope

Scope 直接解释为“范围;余地;视野;眼界;导弹射程”,这里一般称之为作用域。我的理解是 Scope 扮演数据(数据+函数,javascript 中函数也是对象)承载者的角色,是一个用来保存 Angular 中 Model (模型)和函数等的对象。

注:JavaScript 中的所有事物都是对象,布尔型、数字型、字符串、日期、数学和正则表达式、数组、甚至函数,都可以是对象。

$scope 提供双向绑定的功能,“双向”意味着如果view改变了属性值,model就会“看到”这个改变,而如果model改变了属性值,view也同样会“看到”这个改变。Angular 自动搭建好了这个机制。

双向绑定

为了更好地操作数据,Scope 有其作用域,类似于全局变量/局部变量的概念,有一个根作用域 $rootScope ,作用于整个应用中。

module

module,模块,其实就是一系列函数的集合,当应用被启动时,这些函数就会被执行。
比如

1
var app = angular.module('myApp', []);

定义了一个模块,在HTML页面中实例化该应用(模块):

1
<html ng-app="myApp">

可以把ng-app设在任何DOM元素上,然后该元素就会成为AngularJS启动运行指定应用的地方。

1
2
3
<div ng-app="embeddedApp">
<h3>Inside an AngularJS app</h3>
</div>

constant

常量,不能修改其值。

value

变量,可以修改值。

controller

控制器,简单说就是 Angular 的主函数,其中实现了对数据或者HTML DOM元素的操作,其他各类函数(factory、service等)都可以在这里用。

factory

factory 是一个函数,必须有返回值。

service

service是服一个函数或对象,与factory区别在于可以没有返回值。Angular 在调用 service 时会用 new 关键字,而调用 factory 时只是调用普通的 function,所以 factory 需要返回,而 service 可以不返回。

Angular 本身内置了很多服务,比如 $http 服务向服务器发送请求并响应服务器传送过来的数据、 $timeout 服务在规定的毫秒数后执行指定函数等。

provider

provider是value、service、factory的底层,其他都是provider的封装。因此,可以通过 provider 创建 service、factory等。

filter

过滤器,可用于转换数据,比如 currency 过滤器格式化数字为货币格式、lowercase 格式化字符串为小写等。

系统内置了一些过滤器,也可以自定义过滤器。

依赖注入

依赖注入的思想到处都在用,wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。

简单来说,就是在下层需要上层服务的时候,上层做修改的时候不需要管下层,下层直接用就好了,从而使得程序设计变得松耦合。

这个思想不太容易一下子理解,可以参考说说依赖注入

总结

感觉本来操控DOM是一个简单的事情,Angular把这个问题搞得挺复杂,尤其是搞了很多概念,导致学习曲线比较陡峭。

参考

  1. AngularJS 教程:http://www.runoob.com/angularjs/angularjs-tutorial.html
  2. [译] 2017 年比较 Angular、React、Vue 三剑客:https://juejin.im/post/5a0d5df1f265da43062a542f
  3. AngularJS中的Provider们:Service和Factory等的区别:https://segmentfault.com/a/1190000003096933
  4. AngularJS – from beginner to expert in 7 steps series:http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html

最后更新: 2019年04月19日 21:37

原始链接: http://andersjing.com/2018/07/06/AngularJS/

× 请打赏~
打赏二维码