适用于angular 2.0 及以上版本
前言 ：在上一篇文章里面我们体验了创建一个空白Angular框架，但是要想真正入门Angular，概念知识是必不可少，今天一起学习，共勉。
一、基本概念
以下讲解部分摘抄至官网
1、什么是NgModule（模块）
① 官方解释： Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。
② 个人理解： 我们可以在NgModule在这个容器内存放组件、插件等以供全局使用。
2、什么是component（组件）
① component又称组件，是Angular框架中的最小单位，可重复使用
② 每个component中都包装有独立的html，js，css文件（仅对本component生效）
3、什么是service（服务）
① 官方解释： 应该将服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。
② 个人理解： 将从API请求数据、登录验证、公用性强的方法写到服务里面以供重复使用
4、什么是dependency injection（依赖注入）
① 官方解释： DI 被融入 Angular 框架中，用于在任何地方给新建的组件提供服务或所需的其它东西。 组件是服务的消费者，也就是说，你可以把一个服务注入到组件中，让组件类得以访问该服务类。在 Angular 中，要把一个类定义为服务，就要用 @Injectable() 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。 同样，也要使用 @Injectable() 装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）拥有一个依赖。
② 个人理解： 如下图的service中会自带@Injectable() 装饰器表示他是为可以作为依赖注入到组件
二、结构型指令
官方解释： 结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。
1、*ngIf 判断指令
当*ngIf 后面的变量值为true展示元素，为false销毁元素
<div *ngIf="testFlag">啦啦啦</div>
2、*ngFor 循环指令
*ngFor 循环指令用来循环元素，请参考以下案例
html文件：
<table>
<thead>
<tr><td>序号</td><td>英文名</td></tr>
</thead>
<tbody>
<tr *ngFor="let item of list; let i = index">
<th>{{i+1}}</th>
<th>{{item}}</th>
</tr>
</tbody>
</table>
js文件：
list = ["Mio","Neeko","abby"] ;
css文件：
table,th,td{
border: 1px solid black;
border-collapse: collapse;
}
运行结果：
三、数据展示
1、{{}} 双大括号绑定到html页面
html文件：
<p>{{test}}</p>
js文件：
test = "我显示出来啦" ;
2、[ ] 绑定DOM属性
在元素属性加上[]就可以绑定使用变量，但是只能做数据显示，不能双向流动
html文件：
<input [value]="test"/>
<p>{{test}}</p>
js文件：
test = "我被绑定啦" ;
3、( ) 事件绑定
angular框架 html 文件支持所有html事件
html文件：
<button (click)="changeTest()">点我</button>
<p>{{test}}</p>
js文件：
test = "我被绑定啦" ;
changeTest(){
this.test = "我被改变啦" ;
}
点击前：
点击后：
4、[(ngModel)] 双向绑定
① 使用前提，需要在app.module.ts中引入FormsModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// [(ngModel)]使用前提
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// [(ngModel)]使用前提
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
② 使用方式如下
html文件：
<input [(ngModel)]="test"/>
<p>{{test}}</p>
js文件：
test = "我被绑定啦" ;
初始页面：
更新输入框值后：
结论： [(ngModel)]双向绑定可以将在UI输入的值更新给变量
结尾的话: 通过今天的学习，我们可以做一些简单的页面数据处理现实，具体操作后续学习吧，拜~❤
