3小时入门angular

本教程分为上、中、下三部分。讲解angular概念；

学习视频

一、上：语法篇

1. 主要文件介绍

main.js

• 描述：模块化启动入口
• 职责：加载启动根模块

AppModule

• 描述：项目根模块
• 职责：把组件、服务、路由、指令等组织到一起，设置启动组件为根组件

AppComponent

• 描述：项目根组件
• 职责：

2. 核心特性

2.1 组件(Components)

组件是整个框架的核心，“组件化”的意义有2个：

• 分治：有了组件，可以把各种逻辑封装在组件内部，避免混在一起；
• 复用：封装成组件以后，不仅可以在项目内部使用，也可以沉淀下来跨项目复用；

2.2 模块(Modules)

模块包含组件、服务、路由、指令等；

2.3 模板(Templates)

2.4 元数据(Metadata)

元数据告诉Angular如何处理组件类。

// 引入angular核心模块里的Component
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
// 以上装饰器中的内容是元数据
export class AppComponent {
  title = 'angulardemo01';   //定义属性
}

2.5 数据绑定(Data binding)

通过 {{}} 语法将数据绑定到DOM元素，当数据改变的时候会实时更新数据到视图

2.6 指令(Directives)

Angular扩展了HTML语法，增加了一些特殊的属性指令，例如：
*ngFor :循环指令
*ngIf :条件判断指令
[(ngModuel)] :表单控件双向绑定

2.7 服务(Services)

2.8 依赖注入(Dependency injection)

3. 模板语法

3.1 文本绑定

这里value是在组件中定义的变量；

• {{ value }} ：普通绑定，无法翻译HTMl；支持简单的模板语法；
• [innerHTML] = "value" : HTML标签类型的绑定；作为标签属性使用，支持绑定带HTML的文本；

3.2 属性绑定

• <img [src]= "value" alt=" ">
• <img bind-src=" value" alt=" ">
• <img src =" {{value}}" alt=" ">
• <p [value1]="value2">......</p>

3.3 条件渲染

• 组件中定义变量

public flag:boolean = true;

• 模板中渲染

//如果flag = true页面显示我喜欢if，否则页面显示我喜欢else
<div *ngIf = "flag else blockif">我喜欢if</div>
<ng-template  #blockif>我喜欢else</ng-template>

3.4 列表渲染

• 组件中定义变量

public list = ["a","b","c"];

模板中渲染

<ul>
     <li *ngFor="let item of list">
         {{item}}
     </li>
</ul>

带序号的列表渲染：

<ul>
     <li *ngFor="let item of list" let i=index>
         {{i+1}}---{{item}}
     </li>
</ul>

3.5 事件绑定

组件中定义

在这里插入代码片

模板中响应

在这里插入代码片

3.5 样式绑定绑定

3.5 单击高亮绑定

3.5 表单双向绑定

3.5 管道

二、中：组件篇

三、下：路由篇

1.引入库