哇哦！快速入门Angular

简介

类似vue.js，由google团队开发，开发单页面（spa）应用程序

angular.io

支持 MVVM、组件化、模块化、指令、服务、依赖注入、TypeScript

---

Hello world

新建项目

ng new project_name

新建好的项目会自动根据npm进行依赖的安装，之后只需要进入项目

cd project_name
ng serve

就可以打开测试服务器，进行开发工作了

---

目录结构

首先是项目根本的目录结构

- src: 项目源码目录

- angular.json: 脚手架配置文件
- .editorconfig 编辑器代码风格配置

- tsconfig.app.json: app项目的TypeScript的配置文件
- tsconfig.json: 整个工作区的TypeScript配置文件
- tsconfig.spec.json: 用于测试的TypeScript配置文件

然后是src下源码结构中的目录结构

- app: 组件目录
- assets: 项目静态资源目录
- index.html: 核心单页面
- main.ts: 类似vue的main.js，这是项目的入口文件
- test.ts: 测试文件
- styles.css: 全局样式文件

组件

组件是angular的主要构造块，每隔组件包括如下部分

• Html 模版
• Css 样式
• Typescript 行为类对象

创建组件

ng generate component <component-name>

component-name是组件名

目录结构

- component-name.component.ts: 组件文件
- component-name.component.html: 组件模版
- component-name.component.css: 组件样式
- component-name.component.spec.ts: 测试文件

文件结构

component-name.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-demo1';
}

selector: css选择器，代表渲染的标签位置

templateUrl: 模版文件位置，也可以直接在组件内部使用template属性编写模版

styleUrls: 样式文件，也可以直接在组件内部使用styles属性定义样式列表

---

@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})

跨多行使用单个反引号

---

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

styles属性即是一个包含css的字符串数组

生命周期

angular的组件生命周期方法大都是通过由接口名再加上 ng 前缀构成的

ngOnChanges

一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法

ngOnChanges(changes: SimpleChanges) {
  for (const propName in changes) {
    const chng = changes[propName];
    const cur  = JSON.stringify(chng.currentValue);
    const prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

SimpleChange对象， 该对象中有属性的当前值和前一个值

ngOnInit

ngOnInit用于在第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件，只会被调用一次

这里只有一个操作，就是加载数据

ngOnInit() {}

ngOnDestroy

组件销毁时调用

ngOnDestroy() {}