Angular学习笔记

angular

1、angular核心概念

• 模块（modules）

1、模块是组件之上的一层抽象，组件及指令、管道、服务、路由等都通过模块来组织。
2、Angular使用 @NgModule 装饰器来创建模块。
3、一个应用可以有多个模块，但有且只有一个根模块（Root Module），其他模块叫作特性模块。
4、NgModule的主要元数据：declarations、exports、imports、providers、bootstrap
    1）、bootstrap：用于指定应用的根组件。
    2）、declarations：用于指定属于该模块的组件、指令和管道。一个组件、指令和管道只能属于一个模块。
    3）、exports：模块对外提供的组件、指令和管道，一般和declarations的值一样。
    4）、imports：引入该模块依赖的其他模块或路由。
    5）、providers：指定模块依赖的服务。

• 组件（components）
• 模板（templates）
• 依赖注入（dependency lnjection）
• 服务（services）
• 数据绑定（data binding）
• 指令（directives）

2、angular核心模块

一个完整的angular应用主要包含6部分：组件、模板、指令、服务、依赖注入和路由

• 组件

1、组件的外在形态就是自定义标签，所以组件的调用实际体现在模板标签里的引用。
2、创建组件的步骤
    1）、从 @angular/core 中引入Component装饰器。
    2）、建立一个普通类，并用 @Component 修饰它。
    3）、在 @Component 中设置selector自定义标签和template模板。
3、组件的基础构成：组件装饰器（Component Decorator）、组件元数据（Component Metadata）、模板、组件类
    1）、组件装饰器：每个组件类都必须用 @Component 装饰才能成为Angular组件
    2）、组件元数据：selector、template和templateUrl 等等，位于组件装饰器中
        a、selector：定义组件标签名
        b、template/templateUrl：定义组件宿主元素模板（template为内联模板，templateUrl为外联模板），两者只能使用一个
        c、styles/styleUrls：定义组件样式（styles为内联样式，styleUrls为外联样式[推荐使用]），两者可以同时指定，angular允许使用多个样式表文件来渲染一个组件。
           样式优先级(从低到高)：styles < styleUrls < 模板内嵌样式
    3）、模板：渲染到页面上的HTML，组件必须只能有一个模板，angular才能把组件内容渲染到DOM上，这个DOM元素就叫作宿主元素。
        组件与宿主元素的交互形式包括：显示数据、双向数据绑定、监听宿主元素事件，以及调用组件方式
        a、显示数据：使用插值语法“{{XXXX}}”来显示组件的数据
        b、双向数据绑定：使用ngModel实现双向数据绑定，如：[(ngModel)] = "XXXX"。任何一方数值改变，同时会在另一方提现。
        c、监听宿主元素事件，以及调用组件方式：“()”是Angular提供的事件绑定语法，实现调用组件方法，如：(click) = “XXXX()”
    4）、组件类：组件的所有逻辑都在组件类里定义并实现

• 模板

1、数据绑定：
    属性绑定：
    事件绑定：
    插值：{{}}
    双向绑定：[(ngModel)] = "contact.name"
    管道（使用“|”表示）：<span>{{contact.telephone | phone}}</span>，其中phone属于自自定义管道

• 指令

1、指令与模板密切相关，可以与模板中DOM元素进行灵活交付。指令分为：结构指令和属性指令
    结构指令：添加、修改或删除DOM，如ngIf:<button *ngIf="canEdit">编辑</button>
    属性指令：改变元素的外观或行为。如ngStyle:<span [ngStyle]="setStyle()">{{contact.name}}</span>  根据setStyle方法的返回设计样式

• 服务

 

• 依赖注入

 

• 路由

 

 

 

 

 

TypeScript

1、基本类型

布尔类型（boolean）	let flag: boolean = true;
数字类型（number）	let aa: number = 100;	支持二进制、八进制、十进制和十六进制
字符串类型（string）	let bb: string = "qwe";
数组类型（array）	let cc: number[] = [1,2];  let cc: Array<number> = [1,2];
元组类型（tuple）	let x: [string, number]; x = ["qwe",100];
枚举类型（enum）	enum Color {Red, Green, Blue}; let dd: Color = Color.Red;	枚举默认下标是0，可以手动修改默认下标值  enum Color {Red = 2, Green, Blue = 8};
任意值类型 （any）	let ee: any = 1; ee = "qwe"; ee = false;
null和undefined		在tsconfig.json中启动强制空校验（"strictNullChecks": true）
void类型		主要用于函数返回标识
never类型		为其他类型的子类型，它可以赋值给其他类型  其他类型不能赋值给它

变量可以通过“|”来支持多种类型：let xx: number | null | undefined；

参数的声明方式：

• var：全局有效（作用域）
• let：代码块有效（作用域）
• const：用于常量的声明，代码块有效（作用域）

 

2、函数

函数的声明：

function maxA(x: number , y: number): number{
    return x > y ? x : y;
}

可选参数：在参数旁边加上“？”使其变成可选参数

function maxA(x: number , y?: number): number {
    if(y){
        return x > y ? x : y;
    } else {
        return x;
    }
}

默认参数

function max(x: number , y = 8): number {
    return x > y ? x : y;
}

剩余参数

function max(x: number , ...y: number[]):number{
    let maxTemp = x;
    if(y){
        for(let i = 0 ; i < y.length ; i++){
            if(maxTemp < y[i]){
                maxtemp = y[i];
            }
        }
    }
    return maxTemp;
}

函数重载

箭头函数:：解决this动态绑定问题

let max = (a , b) => return a > b ? a : b;