第三章:Angular的工作原理
- Angular应用是由组件构成的
- 当开发新的Angular应用时,先画出原型图,然后拆分成组件
- 因为我们经常用到组件,所以有必要对组件进行进一步的研究,每个组件都由三个部分组成:
- 组件注解
- 视图
- 控制器
- 组件注解
-
@component
注解是对组件进行配置的地方,一般来说,@component
会配置你的组件如何与外界交互 - Angular组件的一个核心特性:输入/输出。
方括号<products-list [productList]="products" (onProductSelected)="productWasSelected($event)"> </products-list>
[ ]
用来传递输入,圆括号( )
用来处理输出
-
- 关于数据架构的一点说明
在AngularJS中,默认选项是双向绑定。双向绑定在开发的起步阶段非常好用:控制器保存数据,表单直接修改数据,视图显示数据。
不过双向绑定的问题是,它经常导致整个应用出现级联效应。随着项目规模的扩大,我们越来越难于追踪数据的流向。
双向绑定的另一个问题是由于我们的数据要通过组件下发,一般情况下“数据结构树”将不得不与“DOM结构树”相对应。但在实践中,最好把这两件事分开
处理这种情况的方法之一是创建数据服务
****Service
,这是保存当前数据的当例服务。当由数据变动时,这个服务就会通知所有相关的对象。
Angular中推荐的方式时采用一种叫做单项数据绑定的方案(在其他一些现代Web开发框架中也是一样,例如React)。也就是说,的数据只会向下流入组件。如果你需要改变数据,就要在顶层触发事件,然后向下liu'zhi