目录
- 第一节 - 基于 Angular CLI 新建项目
- 第二节 - 创建简单的组件
- 第三节 - 事件和模板引用
- 第四节 - 事件进阶
- 第五节 - 注入服务
- 第六节 - 使用 ngFor 指令
- 第七节 - 使用 Input 装饰器
- 第八节 - 使用双向绑定
- 第九节 - 使用 Output 装饰器
- 第十节 - 组件样式
第一节 - 基于 Angular CLI 新建项目
安装 Angular CLI (可选)
- 安装 Angular CLI (可选)
- --- ------- -- ------------
- 检测 Angular CLI 是否安装成功
- -- ---------
使用 Angular CLI
- 新建项目
- -- --- ---------------------
- 启动本地服务器
- -- -----
若想进一步了解 Angular CLI 的详细信息,请参考 Angular CLI 终极指南。
第二节 - 创建简单的组件
新建组件
- -- -------- --------- ----------- ----------------- -------------- - -- - -- - - ----------- --- --- - ---------------------
在命令行窗口运行以上命令后,将输出以下内容:
---------- --------- ------ ------------------------------------------------- ------ -------------------------------------------- ------ ---------------------
即执行上述操作后,创建了两个文件:
- simple-form.component.spec.ts - 用于单元测试
- simple-form.component.ts - 新建的组件
除此之外,update src/app/app.module.ts
表示执行上述操作后,Angular CLI 会自动帮我们更新 app.module.ts
文件。所更新的内容是把我们新建的组件添加到 NgModule
的 declarations
数组中,具体如下:
----------- ------------- - ------------- ------------------- -- --- -- ------ ----- --------- - -
使用组件
AppComponent
------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ------------------ ----- ------------------ ------ - -- ------ ----- ------------ - ----- - ------- --------- -
SimpleFormComponent
------ - ---------- ------ - ---- ---------------- ------------ --------- ------------------ --------- - --- ----------- ------ ---- -- ------- -- -- ------ ----- ------------------- ---------- ------ - ------------- - - ---------- - - -
从生成的 SimpleFormComponent
组件中,我们发现组件的 selector
是 app-simple-form
,而我们是使用以下命令创建该组件:
- -- - - ----------- --- ---
即 Angular CLI 在创建组件时,自动帮我们添加了前缀。那为什么前缀是 app
呢?答案是在项目根目录下的 .angular-cli.json
文件中,已经默认帮我们配置了默认的前缀,具体如下:
- --- ------- - - ------- ------ --------- ------- --- --------- ------ --- - -- -
当然你可以根据实际需求,自行更改默认的前缀配置。
第三节 - 事件和模板引用
在 Angular 中,我们可以使用 (eventName)
语法,进行事件绑定。此外,可以使用 #variableName
的语法,定义模板引用。具体示例如下:
SimpleFormComponent
------ ----------- ------- ---- ---------------- ------------ --------- ------------------ --------- - ----- ------ ----------- ------------ ------- -------------------------------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -------------- - ------------------- - ---------- -- -
需要注意的是,若我们改变绑定的表达式为 (click)="onClick(myInput)"
,当我们点击按钮时,控制台输出的结果是:
------ ------------
通过该输出结果,我们可以知道 #variableName
语法,我们获取的对象是对应 DOM 元素的引用。
第四节 - 事件进阶
获取鼠标事件
在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event
变量,具体如下:
------ ----------- ------- ---- ---------------- ------------ --------- ------------------ --------- - ----- ------ ----------- ------------ ------- ------------------------ --------------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -------------- ------ - ------------------- ------------------- - ---------- -- -
成功运行以上代码,当我们点击按钮时,控制台将输出:
---------- ----------- ----- -------- ---- -------- ---- -------- ---- -------- ----
需要注意的是,参数名一定要使用 $event
,否则无法获取正确的鼠标事件。此外,onClick($event, myInput.value)
表达式中,$event
的顺序是任意的,如:
------- ------------------------------- --------------------
当 Angular 在调用我们的事件处理函数时,会自动帮我们处理调用的参数。$event
自动映射为触发的事件,与我们 Provider
中 Token
的作用类似。除了监听鼠标事件外,我们还可以监听键盘事件。
获取键盘事件
------ ----------- ------- ---- ---------------- ------------ --------- ------------------ --------- - ----- ------ ----------- ----------- -------------------------------- ---------------- ------- ------------------------ --------------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -- --- -------------- ------ - ------------------- ------------------- - -
以上代码中, (keydown.enter)="onEnter($event, myInput.value)"
表达式表示我们监听键盘 enter
键的按下事件,当我们按下键盘的 enter
键时,将会调用组件类中定义的 onEnter()
方法。我们同样也可以通过 $event
来获取 KeyboardEvent
对象。
第五节 - 注入服务
新建服务
- -- - - ----
在命令行窗口运行以上命令后,将输出以下内容:
---------- ------- ------ ---------------------------- ------ ----------------------- ------- ------- -- --------- --- --- --------- -- ---- -- -------- -- -- ----
即执行上述操作后,创建了两个文件:
- mail.service.spec.ts - 用于单元测试
- mail.service.ts - 新建的服务
除此之外,WARNING Service is generated but not provided,...
表示执行上述操作后,Angular CLI 只会帮我们创建 MailService
服务,不会自动帮我们配置该服务。
配置服务
------ ------------- ---- ----------------- ----------- --- ---------- -------------- ---------- -------------- -- ------ ----- --------- - -
更新服务
------ - ---------- - ---- ---------------- ------------- ------ ----- ----------- - -------- ------ -------------------- ------------- - - -
使用服务
------ - --------- - ---- ---------------- ------ ------------- ---- ----------------- ------------ --------- ----------- --------- - ------------------ ----- ------------------ ----------------------- ------ - -- ------ ----- ------------ - ----- - ------- --------- ------------------- ------------ ------------ -- -
除了使用 constructor(private mailService: MailService)
方式注入服务外,我们也可以使用 Inject
装饰器来注入 MailService
服务:
------ ----------- ------- ---- ---------------- ----------------- ------ ----- ------------ - ----- - ------- --------- -------------------------------- ------- ------------ -- -
不过对于 Type
类型(函数类型) 的对象,我们一般使用 constructor(private mailService: MailService)
方式进行注入。而 Inject
装饰器一般用来注入非 Type
类型的对象。
使用Inject装饰器
AppModule
----------- --- ---------- - ------------ --------- --------- --------- ---------------------------------------- -- ---------- -------------- -- ------ ----- --------- - -
AppComponent
------------ --------- ----------- --------- - ------------------ ----- ------------------ ----------------------- ----------- -------------- ------ - -- ------ ----- ------------ - ----- - ------- --------- ------------ -------------------- ------- ------------ ----------------- ------- ------ - -- -
第六节 - 使用 ngFor 指令
在 Angular 中我们可以使用 ngFor
指令来显示数组中每一项的信息。
使用 ngFor 指令
更新 MailService 服务
------ - ---------- - ---- ---------------- ------------- ------ ----- ----------- - --------- -------- - - --------------- ------------------ --------------- -- -
更新 AppComponent 组件
------ ----------- ---- ---------------- ------ ------------- ---- ----------------- ------------ --------- ----------- --------- - ------------------ ---- --- ----------- ------- -- --------------------- ----- -- ---- ----- - ----------- ----- ----- - -- ------ ----- ------------ - ----- - ------- --------- ------------------- ------------ ------------ -- -
在 AppComponent 组件的模板中,我们使用 let item of items;
语法迭代数组中的每一项,另外我们使用 index as i
用来访问数组中每一项的索引值。除了 index
外,我们还可以获取以下的值:
- first: boolean - 若当前项是可迭代对象的第一项,则返回 true
- last: boolean - 若当前项是可迭代对象的最后一项,则返回 true
- even: boolean - 若当前项的索引值是偶数,则返回 true
- odd: boolean - 若当前项的索引值是奇数,则返回 true
需要注意的是,*ngFor
中的 *
号是语法糖,表示结构指令。因为该语法最终会转换成:
------------ -------- ----------- ----------------- -------------- ------------ --------------
除了 *ngFor
外,常用的结构指令还有 *ngIf
、*ngSwitchCase
指令。
第七节 - 使用 Input 装饰器
为了让我们能够开发更灵活的组件,Angular 为我们提供了 Input
装饰器,用于定义组件的输入属性。
使用 Input 装饰器
更新 SimpleFormComponent 组件
------ ----------- ------------- ---- ---------------- ------------ --------- ------------------ --------- - ----- ----------- ------ ----------- ----------- -------------------------------- ---------------- ------- ------------------------ --------------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -------- -------- ------- -- --- -
更新 AppComponent 组件
------ ----------- ---- ---------------- ------ ------------- ---- ----------------- ------------ --------- ----------- --------- - ------------------ ---------------- ----------- ------- -- ---------------------- -------------------- ------------------ - -- ------ ----- ------------ - ----- - ------- --------- ------------------- ------------ ------------ -- -
在 AppComponent 组件模板中,我们使用 [message]="message"
属性绑定的语法,实现数据传递。即把数据从 AppComponent
组件,传递到 SimpleFormComponent
组件中。
需要注意的是,当 SimpleFormComponent
组件类的属性名称不是 message
时,我们需要告诉 Angular 如何进行属性值绑定,具体如下:
------ ----- ------------------- ---------- ------ - ----------------- ---- ------- -- --- -
不过一般不推荐这样做,尽量保持名称一致。
第八节 - 使用双向绑定
使用过 AngularJS 1.x 的同学,应该很熟悉 ng-model
指令,通过该指令我们可能方便地实现数据的双向绑定。而在 Angular 中,我们是通过 ngModel
指令,来实现双向绑定。
使用双向绑定
引入 FormsModule
------ ------------- ---- ----------------- ----------- -- --- -------- - -------------- ----------- -- -- --- -- ------ ----- --------- - -
使用 ngModel 指令
------------ --------- ------------------ --------- - ----- ----------- ------ ----------- ----------- ---------------------- ------- ------------------------ --------------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -- ----
上面示例中,我们使用 [(ngModel)]="message"
语法实现数据的双向绑定。该语法也称作 Banana in the Box
语法,即香蕉在盒子里 (比较形象生动,记忆该语法)。
除了使用双向绑定,我们也可以通过 ngModel
指令,实现单向数据绑定,如 [ngModel]="message"
。
第九节 - 使用 Output 装饰器
Output
装饰器的作用是用来实现子组件将信息,通过事件的形式通知到父级组件。
在介绍 Output 属性装饰器前,我们先来介绍一下 EventEmitter
这个幕后英雄:
--- -------------- -------------------- - --- ----------------------- ------------------------------- ------- -- -------------------- -----------------------
接下来我们来介绍如何使用 Output
装饰器。
使用 Output 装饰器
更新 SimpleFormComponent 组件
------ ----------- ------- ------ ------- ------------- ---- ---------------- ------------ --------- ------------------ --------- - ----- ----------- ------ ----------- ----------- ---------------------- ------- --------------------------- ---------------------- -------------- -- ------- -- -- ------ ----- ------------------- ---------- ------ - -------- -------- ------- --------- ------ - --- ------------------- -------------- ---------- - - -
</{text:>
更新 MailService 服务
------ ------------ ---- ---------------- ------------- ------ ----- ----------- - --------- ---------- ---------- -------- ----------- - - ---- -- ----- ---------------- ---- -- ----- ------------------- ---- -- ----- ---------------- -- ---------- ----- - ------------- - --------------------- -- - ------ ------ --- -- - ---- ----- - ---- --- - -
</{id:>
更新 AppComponent 组件
------ ----------- ---- ---------------- ------ ------------- ---- ----------------- ------------ --------- ----------- --------- - ------------------ ---- --- ----------- ------- -- ----------------------- ---------------- ----- ----- ---------------- ----------- ------- -- ---------------------- ------------------------ ------------------------------ -------------- ------------------ - -- ------ ----- ------------ - ----- - ------- --------- ------------ ----- - --------------------------- ------ - ------------------- ------------ ------------ -- -
上面示例中,我们仍然使用 (eventName)
事件绑定的语法,监听我们自定义的 update
事件。当在 SimpleFormComponent
组件中修改 input
输入框的文本消息后,点击更新按钮,将会调用 AppComponent
组件类中的 onUpdate()
方法,更新对应的信息。
第十节 - 组件样式
在 Angular 中,我们可以在设置组件元数据时通过 styles
或 styleUrls
属性,来设置组件的内联样式和外联样式。
使用 styles 属性
------ ----------- ------- ------ ------- ------------- ---- ---------------- ------------ --------- ------------------ --------- - --- -- ------- -- ----- - ------- ----- - ----------- - ------------ ------ - - -- ------ ----- ------------------- ---------- ------ - -------- -------- ------- --------- ------ - --- ------------------- -------------- ---------- -- -
</{text:>
上面示例中 :host
表示选择宿主元素,即 AppComponent
组件模板中的 app-simple-form
元素。
用过 AngularJS 1.x 的同学,对 ng-class
应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass
。接下来我们来看一下,ngClass
指令的具体应用。
使用 ngClass 指令
ngClass
指令接收一个对象字面量,对象的 key
是 CSS class 的名称,value
的值是 truthy/falsy
的值,表示是否应用该样式。
------------ --------- ------------------ --------- - ----- ----------- ------ ----------- ----------- --------------------- ---------------------- ------------- ------------------------ - ----- ---------------------- - ------ ------------------------- - ------- ------- --------------------------- ---------------------- -------------- -- ------- -- ----- - ------- ----- - ---------- - ------- --- ----- ------ - ----------- - ------------ ----- -------- ------ - - -- ------ ----- ------------------- ---------- ------ - ------------ -------- -- --- -
ngClass 指令用法
---- ----- --- ---- --------------------- ------------ -- ----- -------------- ---- --------------------- ----------- -- ------ -------------- ---- --------- --- ---- --------------------- ------------- ----- ------ -------- ------ -- ---------- - ---- - ----- -- ------ ---- -------- --- ------------------------------- ----------- ----- ----- -------- ------ ---- --- ------ ----- ---- ------ --- ---- ------------ ------------------- ---------- ---- ---- ------ ---- - ---- ---------- --- ----- ------- ------
</div[ngClass]="{'bordered-box':>
除了 ngClass
指令外,Angular 还为我们提供了 ngStyle
指令。
使用 ngStyle 指令
ngStyle
指令让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。
ngStyle 指令用法
---- ------------------ -------- ------------------- --------- ---- ----- ----- ---- -- ---- ---------- ------
需要注意的是, background-color
需要使用单引号,而 color
不需要。这其中的原因是,ng-style
要求的参数是一个 Javascript
对象,color
是一个有效的 key
,而 background-color
不是一个有效的 key
,所以需要添加 ''
。
对于一些场合,我们也可以直接利用 Angular 属性绑定的语法,来快速设置元素的样式。
- 设置元素的背景颜色
---- ---------------------------------- ----- --- ----- ------ ---------- ------
- 设置元素的字体大小
---- ----- -- - -- - ---- ----- ----- ------------------ ------- -------------------------------- --- ---- ------- ------
我有话说
除了本系列教程外,还有其它入门的资料么?
本系列教程的主要目的是让初学者对 Angular 的相关基础知识,有一定的了解。除了本系列教程外,初学者还可以参考以下教程: