Angular2+学习笔记

开始

安装angular/cli
npm install -g @angular/cli
创建完项目之后，会自动下载package.json的依赖项，最好使用cnpm下载

初始化项目
ng new my-app

创建组件
ng generate component my-new-component

项目结构

Code


├── e2e 				端到端测试（暂且不关心）
├── node_modules		npm安装的第三方包
├── src 				存放业务源码
├── .editorconfig 		针对编辑器的代码风格约束
├── .gitignore    		Git仓库忽略配置项
├── .angular.json 		AngularCLI脚手架工具配置文件
├── karma.conf.js 		测试配置文件（给karma用的，暂且不用关心）
├── package.json 		项目包说明文件
├── README.md 			项目说明文件
├── tsconfig.json		TypeScript配置文件
└── tslint.json 		TypeScript代码风格校验工具配置文件（类似于 eslint）

npm scripts指令

Code


"scripts": {
    "ng": "ng", 					运行查看 Angular CLI 脚手架工具使用帮助
    "start": "ng serve", 			运行开发模式
    "build": "ng build", 		运行项目打包构建（用于发布到生成环境）
    "test": "ng test", 				运行karma单元测试
    "lint": "ng lint", 				运行TypeScript代码校验
    "e2e": "ng e2e" 				运行protractor端到端测试
 },

.angular.json 文件

json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src", 			// 源码根目录
      "outDir": "dist", 		// 打包编译结果目录
      "assets": [ 				// 存放静态资源目录
        "assets",
        "favicon.ico"
      ],
      "index": "index.html", 		// 单页面
      "main": "main.ts", 			// 模块启动入口
      "polyfills": "polyfills.ts", 	// 用以兼容低版本浏览器不支持的 JavaScript 语法特性
      "test": "test.ts", 			// 测试脚本
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app", 				// 使用脚手架工具创建组件的自动命名前缀
      "styles": [ 					// 全局样式文件
        "styles.css"
      ],
      "scripts": [], 				// 全局脚本文件
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": { 						// 端到端测试相关配置
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [ 					// TypeScript代码风格校验相关配置
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": { 			// karma单元测试相关配置
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": { 		// 默认后缀名
    "styleExt": "css",
    "component": {}
  }
}

基础知识

数据绑定

数据绑定
- 使用插值表达式的方法来使用
方法绑定
-使用()包着，例如(click)="方法名()"

双向数据绑定

要想使用双向数据绑定功能要先引入
在app.module.ts中引入，import {FormsModule } from "@angular/forms"
在import数组中添加FormsModule

通过指令[(ngModel)]="值"

条件渲染

通过指令*ngIf="true"来判断是否显示
当有两个元素的渲染条件是一样的时候，我们往往会在外边包一层元素，这样就可以不用写重复性的代码，但是会让元素多了个父层级，这样可能会对CSS有影响，
- 通过来解决问题

Code

1
2
3

<ng-template [ngIf]="true">
<div>{{title}}</div>
</ng-template>

列表渲染

通过指令*ngFor="let item of 变量"

Class于Style绑定

通过指令[ngClass]="{key:value}"

通过指令[ngStyle]

事件

通过指令(事件)="方法名()"，
如果向获取到event对象，则需要在绑定方法时，传入$event，固定写法

事件修饰符

.enter 当按下enter建时触发

用户输入

从一个模板引用变量中获得用户输入
还有另一种获取用户数据的方式：使用 Angular 的模板引用变量。这些变量提供了从模块中直接访问元素的能力。在标识符前加上井号 (#) 就能声明一个模板引用变量。下面的例子使用了局部模板变量，在一个超简单的模板中实现按键反馈功能。

Code

@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="aaa(box)">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

生命周期

创建阶段

ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterContentInit - 在组件内容初始化之后调用

ngDoCheck
- 自定义的方法，用于检测和处理值的改变
- 在组件初始化时会调用一次或者多次（我触发了两次）
- 当元素绑定的事件被触发时也会调用

1、ngOnChanges - 当数据绑定输入属性的值发生变化时调用

5、ngAfterContentChecked - 组件每次检查内容时调用

7、ngAfterViewChecked - 组件每次检查视图时调用

销毁阶段

ngOnDestroy - 指令销毁前调用

组件

创建组件用命令行的方式，这样他会自动的生成一个模板，也会自动的添加到配置文件中去，
调用只需<app-组件名></app-组件名>即可

模块

路由

自己使用即可，在创建的模块中有自动引入路由模块

在app-routing.module.ts文件中已经自动引入了import { Routes, RouterModule } from '@angular/router';我们只需要配置路由即可

注意：配置路由不要添加/

配置路由

Code

import { SignIn } from "./sign-in/sign-in.component"

const routes: Routes = [
    { path: "", redirectTo: 'signIn', pathMatch: 'full'},  // 默认路由
    {path: "signIn",component: signIn}    // 路由规则
]

路由出口

Angular中是<router-outlet></router-outlet>
Vue中是<router-view></router-view>
React中是<Router path="" component>

路由跳转
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

子路由

Code

{ 
    path: "index", 
    component: IndexComponent,
    children: [
        {path: "", redirectTo: 'people', pathMatch: 'full'},
        {path: "people",component: PeopleComponent},
        {path: "about",component: AboutComponent},
        {path: "tags",component: TagsComponent}
    ]
}

获取路由的参数

Code

1. 首先导入路由模块
import { ActivatedRoute, Router } from '@angular/router';

2. 再构造函数中作为形参传递
 constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) { 
   
  }

3.1 通过snapshot拿到
 console.log(this.activatedRoute.snapshot.params['id']);

3.2 通过subscribe
 this.activatedRoute.params.subscribe(params => {
      console.log(params.id);
    })

案例

TodoMVC

question

怎么绑定checkbox的选中
- 使用双向数据绑定即可
双击元素拿到了子元素
- event.target: 拿到的是被点击的元素
- event.currentTarget：拿到的是绑定事件的元素
给他绑定了编辑事件，怎么取消编辑，拿不到li元素
- 可以在元素上绑定id，再将id传给方法即可
- 例：<li #list (click)="event(list)"></li>
同时绑定了keyup.enter和blur事件，当失去焦点时两个都会触发
- 这个要么通过全局点击事件来代替blur
- 要么就通过event事件里的event.sourceCapabilities来判断
  - 当enter时这个值是undefined
  - 当是blue时这个值是一个对象

通讯录

先创建模块
配置路由