Angular4笔记

﹏ヽ暗。殇╰゛Y 2022-05-17 01:57 254阅读 0赞

# Angular4笔记 #

参考资料：

*  [Angular 4.0 架构详解][Angular 4.0]
 *  [Angular 4.0 内置指令全攻略][Angular 4.0 1]
 *  [Angular 4.x 修仙之路][Angular 4.x]

## 入门 ##

\#\#\# Angular 与 AngularJS 有什么区别

\*   不再有`Controller`和 `Scope`  
\*   更好的组件化及代码复用  
\*   更好的移动端支持  
\*   引入了 `RxJS` 与 `Observable`  
\*   引入了 `Zone.js`，提供更加智能的变化检测

\#\#\# 基于 Angular CLI搭建开发环境

\*   安装 [Angular CLI][Angular_CLI] (可选)

npm install -g @angular/cli

\*   检测 Angular CLI 是否安装成功

ng --version

\*   创建新的项目

ng new PROJECT-NAME

\*   启动本地服务器

cd PROJECT-NAME
    ng serve

## 架构 ##

官方架构图

![045601998c654a0744b993230674128c.png][]

这个架构图展现了 Angular 应用中的 8 个主要构造块：

*  模块 (module)
 *  组件 (component)
 *  模板 (template)
 *  元数据 (metadata)
 *  数据绑定 (data binding)
 *  指令 (directive)
 *  服务 (service)
 *  依赖注入 (dependency injection)

### 1.模块 (module) ###

Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类。我们新建的页面，如果不使用懒加载，都要`在 @NgModule 中先声明后使用`。

下面举个例子，简单介绍一下 @NgModule 中的内容

//app.module.ts
    
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    @NgModule({
      imports:      [ BrowserModule ],
      providers:    [ Logger ],
      declarations: [ AppComponent ],
      exports:      [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

*  imports 本模块声明的组件模板需要的类所在的其它模块。
 *  providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
 *  declarations 声明本模块中拥有的视图类。Angular 有三种视图类：**组件、指令和管道**。
 *  exports declarations 的子集，可用于其它模块的组件模板。
 *  bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。

### 2.组件 (component)、模板 (template)、元数据 (metadata) ###

//hero-list.component.ts
    
    @Component({
    selector:    'hero-list',
    templateUrl: './hero-list.component.html',
    providers:  [ HeroService ]
    })
    export class HeroListComponent implements OnInit {
    /* . . . */
    }

**Component**

**组件**是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

*  selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 `<hero-list>` 标签，创建并插入该组件。
 *  templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用“\`”这个符号来直接编写 HTML 代码。
 *  providers：组件所需服务的依赖注入。

**template**

**模板**就是那段 HTML 代码，可以用 templateUrl 引入外面的，也可以用 template\`\` 直接写。

**metadata**

**元数据**用类似装饰器的方式来指导 Angular 的行为。 例如 `@Input`、`@Output`、`@Injectable` 等是一些最常用的装饰器，用法就不在这里展开了。

### 3.数据绑定 (data binding) ###

这里一共展示四种数据绑定，看一下示例代码：

//插值表达式    显示组件的hero.name属性的值
    <li>{
       {hero.name}}</li>
    
    //属性绑定    把父组件selectedHero的值传到子组件的hero属性中
    <hero-detail [hero]="selectedHero"></hero-detail>
    
    //事件绑定    用户点击英雄的名字时调用组件的selectHero方法
    <li (click)="selectHero(hero)"></li>
    
    //双向绑定    数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值
    <input [(ngModel)]="hero.name">

1.  双花括号是单向绑定，传递的是值。方向是 `组件 -> 模板`。
2.  方括号是单向绑定，传递的是属性。方向是 `父组件 -> 子组件`。
3.  圆括号是事件绑定，处理`点击等活动（action）`。
4.  方括号套圆括号是双向绑定，方向是 `组件 <-> 模板`。

### 4.指令 (directive) ###

指令有两种类型：结构型 structural 指令和属性 attribute 型指令。

**结构型指令**是 ngFor、ngIf 这种的，`通过在 DOM 中添加、移除和替换元素来修改布局。`

**属性型指令**是 ngModel 这种的，`用来修改一个现有元素的外观或行为。`

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。

// .ts
    
    this.userInfo = ['张三', '李四', '王五'];
    
    // .html
    
    <div class="ui list" *ngFor="let username of userInfo">
        <div class="item">{
       {username}}</div>
    </div>

#### ngSwitch ####

> 作用：防止条件复杂的情况导致过多的使用 ngIf。

**例子：**

// .html
    
    <div class="container" [ngSwitch]="myAge">
        <div *ngSwitchCase="'10'">age = 10</div>
        <div *ngSwitchCase="'20'">age = 20</div>
        <div *ngSwitchDefault="'18'">age = 18</div>
    </div>

**讲解：**

\[ngSwitch\] 先与目标进行绑定，ngSwitchCase 列出每个可能性，ngSwitchDefault 列出默认值。

#### ngStyle ####

> 作用：可以使用动态值给特定的 DOM 元素设定 CSS 属性。

**例子：**

// .ts
    backColor: string = 'red';
    
    // .html
    <div [style.color]="yellow">
        你好，世界
    </div>
    <div [style.background-color]="backColor">
        你好，世界
    </div>
    <div [style.font-size.px]="20">
        你好，世界
    </div>
    <div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
        你好，世界
    </div>

**讲解：**

1.  直接设置颜色为 yellow。
2.  设置背景颜色为 backColor，并可以在 .ts 文件中对 backColor 的值进行修改。
3.  设置字体大小，需要注意的是 `只写 font-size 会报错，必须在后面加上 .px。`当然 .em .% 都是可以的。
4.  前三种都是只设置一个，写 \[ngStyle\] 可以同时写多个，使用花括号包住里面的内容。需要注意的是`连字符 -` 是不允许出现在对象的键名当中的，如果使用 background-color 等时需要加上单引号。

#### ngNonBindable ####

> 作用：告诉 Angular 不要绑定页面的某个部分。

**例子：**

.html
    
    <div ngNonBindable>
        {
       {我不会被绑定}}
    </div>

**讲解：**

使用了 ngNonBindable ，花括号就会被当做字符串一起显示出来。

### 5.服务 (service) ###

服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务是**用来封装可重用的业务逻辑**。

### 6.依赖注入 (dependency injection) ###

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。**大多数依赖都是服务**。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入 HeroService 这个服务，看这段代码：

constructor(private service: HeroService) { 
        ...
    }

这个constructor就是`构造函数`，依赖注入在 constructor 中进行。

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider。

意思就是我们必须在 providers 写上才能用，看这段代码：

@Component({
      selector:    'hero-list',
      templateUrl: './hero-list.component.html',
      providers:  [ HeroService ]
    })

[Angular 4.0]: https://www.jianshu.com/p/3c06260e6015
[Angular 4.0 1]: https://www.jianshu.com/p/4cc3a04ca83a
[Angular 4.x]: https://segmentfault.com/a/1190000008754631
[Angular_CLI]: https://github.com/angular/angular-cli
[045601998c654a0744b993230674128c.png]: /images/20220517/5550f40c3c0f4fbfb68b159f02622d07.png