适用于angular 2.0 及以上版本
一、基本概念1、什么是NgModule（模块）2、什么是component（组件）3、什么是service（服务）4、什么是dependency injection（依赖注入） 二、结构型指令1、*ngIf 判断指令2、*ngFor 循环指令 三、数据展示1、{{}} 双大括号绑定到html页面2、[ ] 绑定DOM属性3、( ) 事件绑定4、[(ngModel)] 双向绑定前言：在上一篇文章里面我们体验了创建一个空白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 './ponent';@NgModule({declarations: [AppComponent],imports: [BrowserModule,// [(ngModel)]使用前提FormsModule,],providers: [],bootstrap: [AppComponent]})export class AppModule {}
② 使用方式如下
html文件：
<input [(ngModel)]="test"/><p>{{test}}</p>
js文件：
test = "我被绑定啦" ;
初始页面：
更新输入框值后：
结论：[(ngModel)]双向绑定可以将在UI输入的值更新给变量
结尾的话:通过今天的学习，我们可以做一些简单的页面数据处理现实，具体操作后续学习吧，拜~❤
