目录
- 第一节 - 基于 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 的相关基础知识，有一定的了解。除了本系列教程外，初学者还可以参考以下教程：