第三天 Angular学习

Angular核心概念之过滤器

Filter:过滤器，用于在View中呈现数据时显示为另一种格式;过滤器的本质是一个函数，接受原始数据转换为新的格式进行输出：

function(orignVal){ ... return newVal }

Angular 1.0为过滤器

‘Angular2.x中，过滤器更名为“管道（Pipe）”

自定义管道的步骤：

1. 创建管管道class，实现转换功能

2. 在模块中注册管道

3. 在模板视图中使用管道

预定义管道：

LowerCasePipe

把文本转换成全小写形式。

{{ value_expression | lowercase }}

UpperCasePipe

把文本转换成全大写形式。

{{ value_expression | uppercase }}

TitleCasePipe

把文本转换成标题形式。 把每个单词的第一个字母转成大写形式，并把单词的其余部分转成小写形式。 单词之间用任意空白字符进行分隔，比如空格、Tab 或换行符。

{{ value_expression | titlecase }}

SlicePipe

从一个 Array 或 String 中创建其元素一个新子集（slice）。

{{ value_expression | slice : start [ : end ] }}

JsonPipe

把一个值转换成 JSON 字符串格式。在调试时很有用。

{{ value_expression | json }}

DecimalPipe

把数字转换成字符串， 根据本地化规则进行格式化，这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

例子：{{num | number:'4.1-4'}}

注：整数最少4位，小数最少一位最多四位

CurrencyPipe

把数字转换成金额字符串， 根据本地化规则进行格式化，这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

例子：{{num | currency:'￥'}}

DatePipe

根据区域设置规则格式化日期值。

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

例子:{{date|date:'yyyy-MM-dd HH:mm:ss'}}

Angular核心概念之服务和依赖注入

创建对象

方式一：手工创建式 —— 自己创建：let c2 =new Car()

方式二：依赖注入式——无需自己new，只需要声明依赖

Service：服务

ANgular认为：组件时与用户交互的一种对象，其中的内容都应该与用户操作有关系的；而与用户操作无关的内容都应该剥离出去，放在“服务对象”中，为组件服务；例如：日志记录，计时统计，数据服务器的访问

创建服务对象的步骤：

1. 创建服务对象并指定服务提供者

@Injectable({providedln:'root'})

export class LogService{}

2. 在组件中声明依赖，服务提供者就会自动注入进来，组件直接使用服务对象即可

export class XxComponent{

constructor(log:LogService){

//此处的log变量就会被注入为LogService实例

}

}

使用Angular官方提供的服务对象HttpClient Service

HttpClient服务对象用于向指定的URL发起异步请求，使用步骤：

1. 在主模块中导入HttpClient服务所在的模块

//app.module.ts

import:[BrowserModule,FormsModule,HttpClientModule]

b.在需要使用异步请求的组件中声明依赖于HttpClient服务对象，就可以使用该对象发起异步请求了

http = null

constructor(http:HttpClient){

this.http = http

}