聊聊Angular2

99 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情

Angular2是对Angular1一次颠覆,可以开发跨平台渐近式Web应用,引入H5的新特性Web Worker和服务端渲染来改善了性能,它配合TypeScript语法来编写严格的代码,号称一套框架多种平台,同时适用手机与桌面,正在飞速发展中, Angular4也已经正式发布,它和Angular2保持了较好的兼容性。

Angular2 应用是由组件组成的。 组件HTML 模板组件类组成,组件类控制视图。组件负责控制屏幕上的一小块区域,我们称之为视图

Angular2还可以与Ionic2一起配合使用。

Angular2主要有8块内容:*

1,模块(module):Angular遵循模块化开发,一个Angular应用至少有一个模块(根模块),根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。模块中通过 declarations 声明模块中包含的组件、指令、冠道,通过 import 导入其所依赖的其他模块,通过 providers 注入其所依赖的服务。*

2,组件(component):组件负责控制屏幕上的一小块区域,对于复杂庞大的页面,可以通过组件将其拆分为多个组件,从而开发时可以专注于某个组件,最后将多个组件合成一个页面,在类中定义组件的应用逻辑,为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。

3,模板(template):模板是组件的视图部分。我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 模板中可以使用指令、组件、管道。

4,元数据(metadata):在angular2中,模块、组件、管道、指令都是一个类,而对于这个类的属性(例如组件的selector,templateUrl)则通过@Component装饰器添加到类中,这些元数据可以理解为类的静态属性,装饰器只是添加这些静态属性的语法糖。

5,数据绑定(databind),和其他前端框架一样,数据绑定(双向绑定)是整个框架中最为实用的功能,在双向绑定中,数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件,把属性值设置为最新的值。和angular1不同,ng2不再实用$digist驱动脏检查,提高了数据绑定效率。

6,指令(directive),指令作为属性或class或自定义标签添加在元素上,当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行 各种操作 组件实质上就是带模板的指令。 A ngular2中也提倡组件化开发,而指令是组件工作的核心。

7,服务(service),对于业务逻辑代码,或者常量,angular提倡单独存放(不像vue一样写在组件中),这样可以提高代码重用性,在需要使用这些服务的组件中导入这些服务。

8,依赖注入(dependency injection),依赖注入和服务共同解决了angular中代码依赖问题。 A ngular将应用中所有的服务集中在注入器中,为组件、过滤器等自动注入所依赖的服务,它降低了业务逻辑代码和UI代码之间的耦合度,提高了代码的重用性,