angular的核心思想是什么?怎么体现在代码里?

小课堂【B组】上海分院第39期

分享人:姚磊

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.拓展思考

7.参考文献

8.更多讨论

1.背景介绍

angular是什么?

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架, 已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、双向数据绑定、语义化标签、依赖注入等等。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言, 但要构建WEB应用的话它就显得乏力了。AngularJS通过MVC模式(MVC)功能增强基于浏览器的应用,使开发和测试变得更加容易。

通常,我们是通过js来解决静态网页技术在构建动态应用上的不足;但是原生js代码量会很大;

类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。目前比较流行的有angular,vue,React,

2.知识剖析

angular的核心思想

Angular是创建在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而命令式编程非常适合来表示业务逻辑。[3]框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,Angular使得对DOM的操作不再重要并提升了可测试性。

angular的亮点和过人之处!

1.代码组织结构清晰

AngularJS模块划分明确,不同的代码有其明确的存放处,可读性强,便于维护和扩展(后面会有代码组织结构图)。

2.功能模块易测试

AngularJS的代码方便测试。虽然代码易测试不能成为一个框架闪光的决定性因素,但是反向思考,如果写出来的代码可测试性差将会使工作效率事倍功半。

3.双向绑定

双向绑定的出现,无可争议的大大简化了你的代码量,与其说是技术的革新,不如说是一场思想上的颠覆与突破。回想jQuery还需要通过在DOM中找到需要的元素并在其上添加事件监听,通过触发事件(如点击等)才能解析获取DOM元素中的值。而在AngularJS中只需要将DOM中的元素与js的某个属性绑定,js属性值变化会同步到DOM元素上,同样的,DOM元素值得变化也会映射到js的属性上。

MVC

MVC核心概念:把管理数据的代码(model)、应用逻辑代 码(controller)、向用户展示数据的代码(view)清晰地分离 Angularjs应用中: 视图就是Document Object Model 控制器就是Javascript类 模型数据则被存储在对象的属性中

数据绑定

数据绑定可自动将model和view间的数据同步。 Angular实现数据绑定的方式,可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。当model发生变化时,会自动反映到view上。

数据绑定

大多数模板系统中的数据绑定都是单向的 把模板与model合并在一起变成view,如果在合并之后,model发生了变化,不会自动反映到view上。 用户在view上的交互也不会反映到model中,开发者必须写大量代码不断地在view与model之间同步数据。

模板是在浏览器中编译的,在编译阶段产生了一个实时更新(live)的视图 不论在model或是view上发生了变化,都会立刻反映到对方。 model成为程序中唯一真实的数据来源,极大地简化了开发者需要处理的编程模型。

依赖注入

依赖注入是一种软件设计模式,用来处理代码的依赖关系。 Angular的依赖注入只是简单的获取它所需要的东西,而不需要创建那些他们所依赖的东西

3.常见问题

怎么体现在代码?

4.解决方案

AngularJS专业术语概览

名称 作用
Module AngularJS中一切都是从Module模块开始的,模块是组织代码的容器,当然模块中还可以包含子模块
Routes 路由负责在应用中基于state进行页面的跳转
Views Views是通过AngularJS编译后呈现的DOM
$scope $scope 实际上就是一个JavaScript对象,controller和view都可以访问它,所以我们可以利用它在两者间传递信息。在这个 $scope 对象里,我们既存储数据,又存储将要运行在view上的函数。$scope是连接controller和view之间的桥梁,
Controller 定义一些属性和方法用于绑定到view的元素上,一般来说,controller是比较轻量的,它里面只放一些负责view呈现的属性和方法
Directive 指令使得AngularJS能够创建自定义的标签并实现相应的功能,可以将指令看成一种特殊的html标签
Service Service负责提供一些通用的功能函数,比如有些数据在多个controller中都会用到,就可以定义在一个service中

5.编码实战

6.参考文献

参考一:AngularJS

参考二:AngularJS

7.更多讨论

angular和jQuery的区别?

鸣谢

感谢大家观看

BY : 李仁 | 姚磊