Angular基础学习笔记

一、基本介绍

1、模块（NgModule）

（1）每一个Angular应用都有一个根模块，通常命名为AppModule，并位于app.module.ts的文件中。根模块提供了用来启动应用的导航机制。一个应用通常会包括很多功能模块。

（2）@NgModule元数据

NgModule是一个带有@NgModule（）装饰器的类。@NgModule（）装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。

（3）app.module.ts：这个根模块会告诉Angular如何组装该应用

例：其重要属性如下所示：

  （重要属性）exports（导出表）--那些能在其它模块的组件模板中使用的可声明对象的子集

2、组件

（1）组件控制屏幕上被称为视图的一小片区域。组件通过一些由属性和方法组成的API与视图交互。

（2）当用户在应用中穿行时，Angular就会创建、更新、销毁一些组件。

（3）组件的元数据

组件的元数据告诉Angular到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。

（4）数据绑定

（5）管道
1）Angular管道可以让你在模板中声明显示值的转换逻辑。带有@pipe装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。
2）管道操作符（|）
（6）指令
指令就是一个带有@Directive()装饰器的类。
1）结构型指令：通过添加、移除或替换DOM元素来修改布局。
2）属性型指令：修改现有元素的外观或行为
NgClass–添加或移除一组css类
NgStyle–添加或移除一组css样式
NgModel–双向绑定到HTML表单元素
例：<input [(ngModel)]=“hero.name” placeholder=“name”>

3、服务与依赖注入
（1）服务
服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。
（2）组件与服务的区别
组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，可以让它被任何组件使用。
（3）依赖注入
在Angular中，要把一个类定义为服务，就要用@Injectable()装饰器来提供元数据，以便让Angular可以把它作为依赖注入到组件中。
同样，也要使用@Injectable()装饰器来表明一个组件或其它类拥有一个依赖。
例：在login.component.ts中

constructor(private loginService:LoginService);

在login.service.ts中

@Injectable()
  export class LoginService(){}

（4）提供服务
a. 当使用特定的@NgModule注册提供商时，该服务的同一个实例将会对该@NgModule中的所有组件可用。
例：
@NgModule({

 providers:[LoginService,QueryService]

)}
b. 当在组件级注册提供商时，会为该组件的每一个新实例提供该服务的一个新实例。
例：
@Component({
select:
templateUrl:

providers:[LoginService]

)}

二、基础知识

1、数据显示
（1）插值表达式：{}
（2）ngFor显示数组
（3）创建一个类来为组件描述模型数据并显示模型的属性
（4）ngIf根据一个布尔表达式有条件的显示一段html
2、指令
（1）属性型指令
@Directive元数据之后的就是该指令的控制器类
例：

@Directive({
	selector:'[phoneValid'],
})
export class phoneValid{
}

页面中应用：

<p phoneValid></p>

3、国际化------ng2-translate
（1）安装ng2-translate

 npm install ng2-translate --save

（2）添加语言包
在src/i18n文件夹下建立zh_CN.json文件以及en_US.json甚至更多语言文件
（3）在app.component.ts文件中导入TranslateService

import {TranslateService } from 'ng2-translate';

constructor (translate:TranslateService,private session:SessionStorageService) {
      const lang = this.session.read(SessionEnum.lang.toString());
      if(lang != null) {
      // 设置默认语言包
        translate.setDefaultLang(lang);
        translate.use(lang);
      }

（3）在页面中使用
a. 在html页面中
例：

 <div title = "{{operation | translate}}"></div>

b. 在component.ts中

import {TranslateService } from 'ng2-translate';

constructor(private translate: TranslateService ){}

c. 在module.ts中

import {TranslateModule} from 'ng2-translate';

@NgModule({
   import:[
     TranslateModule.forRoot();
     ]
 })