Angualr学习笔记

Angular学习笔记

1.简介

1.1 什么是Angular

• Angular： 前端框架， typescript
• 优势：
  • 清晰的结构
  • 代码复用
  • 测试方便

1.2 Angular架构

前端 <==> get/post data <=> 后端

1.3 Angular开发环境

• 创建的angular cli

npm install -g @angular/cli

• 创建一个项目

ng new hello-world 

• 开发

ng serve 

1.4 项目结构

• e2e : test
• node_modules: libraries
• src: source code
  • app: app
  • assets: static assets
  • environments: config settings
  • icon
  • index.html
• editorconfig
• .gitignore
• package.json

1.5 webpack

• HMR(hot module replacement):模块热替换
  ts => compiled into => js bundle

1.7 Angular版本

Angular 4 <= Angular 2.4 => Angular

就是一个Angular Developer

1.8 课程结构

• Essentials
• Advanced Topics
• Final Project

2. TypeScript基础

2.1 什么是typescript

typescript是javascript的超集。任何有效的js都是有效的typescript

• Strong Type (强类型)

• 面向对象特性(OOP)

• Compile-time error

• Great Tooling

2.2 第一个typescript项目

npm install -g typescript

tsc hello.ts 
# 生成一个hello.js文件
node hello.js

2.3 定义一个变量

let data = 1 ;
var data =1 ;

• var 和let的区别
  • var effective at the nearest function
  • var在最近的一个函数中有效
  • let effective at the nearest block
  • let在最近的一个代码块中有效
• use let instead of var

2.4 Types

• Strong Type

let a:number;
a = 1;
a = '123';
let b:boolean;
let c: any;
let d: string;
let e: number[] = [123,21];
let f: any[] = [1, true, 'a'];
enum Color {Red=1, Green=2, Blue=3}
let bg = Color.Blue

2.5 Type Assertions

// by default, let type is any. 
// let message: string;
let message = 'abc';
let ends = message.endsWith('c');
let ends = (<string>message).endsWith('c');
let ends = (message as string).endsWith('c');

2.6 箭头函数

let doLog =()=>{
    console.log('123213214');
}
let doIt  =()=> console.log('fucked');

2.7 Interfaces

interfaces are purely declerations, can not include implementation.

let drawPoint = (x, y)=>{
    const a = x;
};

let drawPoint = ({x, y}) =>{
    const a = x;
}
// 2 ways 
// 1: inline anotation 
let drawPint = (point:{x: number, y: number}) =>{
    //
}

// 2. interface 
interface Point{x: number, y:number };

let drawPoint =(point: Point)=>{}

2.8 Classes

• classes
  • group variables(properties) and functions(methods) that are highly related

interface Point{
    x: number;
    y: number;
    draw: ()=>void;
}

Class Point{
    x: number;
    y: number;
    draw(){
    //
    };
    draw(){
    //
    };

2.9 Objects

class Point {
  x: number;
  y: number;

  draw() {
    console.log('x:' + this.x, 'y:' + this.y);
  }
}

let point = new Point();

point.x = 1;
point.y = 12412;
point.draw();

2.10 Constructor

• constructor must feed
• ? makes it optional

class Point {
  private x: number;
  y: number;

  constructor(x?: number, y?: number) {
    // ? makes it optional 
    this.x = x;
    this.y = y;
  }

  public draw() {
    console.log('x:' + this.x, 'y:' + this.y);
  }
}
let point = new Point(1,3);
point.x = 1;
point.y = 12412;
point.draw();

2.11 Access Modifier

• efine access rights
  • public: public access
  • private: can be only accessed
  • protected:

2.12 Access Modifier in Constructor

class Point {
  // private x: number;
  constructor(public x?: number, private y?: number) {
  }
  draw() {
    console.log('x:' + this.x, 'y:' + this.y);
  }
}
let point = new Point(1,3);
point.x = 12424;
point.y = 12412;
point.draw();

2.13 Properties

• getter
• setter
  如果需要限制访问，比如只读，或者需要验证一下是否正确

class Student{
    constructor(pulic x?: number){
}  
    setX(value){
    return this.x
}

}

2.14 Modules

class Student{
//    
}

export default Student;

3. Angular基础

3.1 Angular组成

• Component

  • encapsulate data, html templates, logic into one view

• Modules

  • container or group of components

3.2 组件(Components)

步骤:

• 创建一个组件
• 注册组件为module
• Html Markup添加element

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

@Component({
  selector: 'courses',
  template: '<h2>Courses111</h2>'
})
export class CourseComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {CourseComponent} from './course.component';

@NgModule({
  declarations: [
    AppComponent,
    CourseComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<courses></courses>

缺点: 以上步骤有点繁杂

3.3 使用Angular cli生成组件

# 创建一个courses组件
ng g c courses

3.4 模板

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

@Component({
  selector: 'course',
  template: '<h2>{{"title: "+ title}}</h2>'
})
export class CourseComponent {
  title = "LoopInsights"

}

3.5 指令

• Directives

import {Component} from '@angular/core';
import {lifecycleHookToNodeFlag} from '@angular/compiler/src/view_compiler/provider_compiler';

@Component({
  selector: 'course',
  template: '<div> <h2>{{title}}</h2><ul ><li *ngFor="let course of courses"> {{course}}</li></ul></div>'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses = ['ToolBar', 'SideBar', 'RightBar'];

}

3.6 Service

a component should not contains anything except displaying

export class CourseService {
  getCourse() {
    return ['Tool1Bar', 'Side1Bar', 'Righ1tBar'];
  }
}

import {Component} from '@angular/core';
import {CourseService} from './course.service';

@Component({
  selector: 'course',
  template: '<div> <h2>{{title}}</h2><ul ><li *ngFor="let course of courses"> {{course}}</li></ul></div>'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses;
  constructor(){
    const service = new CourseService();
    this.courses = service.getCourse()
  }

}

3.7 Inject Dependency

import {Component} from '@angular/core';
import {CourseService} from './course.service';

@Component({
  selector: 'course',
  template: '<div> <h2>{{title}}</h2><ul ><li *ngFor="let course of courses"> {{course}}</li></ul></div>'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses;

  constructor(service: CourseService) {
    this.courses = service.getCourse();
  }

}

register service as provider

  providers: [CourseService],

Decouple

3.8 命令行创建service

ng g s email 

4.展示数据和处理事件

4.1 property绑定

• component update => dom update
• dom update => not component update

  template: '<img [src]="imgUrl" alt="">'

4.2 Attributes绑定

  template: '<img [attr.data]="imgUrl" alt="">'

4.3 如何添加BootStrap

npm install --save bootstrap

<div class="btn btn-primary"></div>

4.4 绑定class

  template: '<button class="btn btn-primary" [class.active]="isActive"></button>'

4.5 绑定style

  template: '<button class="btn btn-primary" [class.active]="isActive" [style.backgroundColor]="bgColor"></button>'

4.5 event binding

• event bubbling

@Component({
  selector: 'course',
  template: '<button class="btn btn-primary" [class.active]="isActive" [style.backgroundColor]="bgColor" (click)="onSave($event)">{{title}}</button>'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses;
  isActive = false;
  bgColor = this.isActive ? 'red' : 'orange';
  imgUrl = 'https://i.udemycdn.com/course/240x135/1039988_d207_3.jpg';

  constructor(service: CourseService, email: EmailService) {
    this.courses = email.getCourse();
  }

  onSave($event) {
    $event.stopPropagation();
    this.isActive = true;
    this.bgColor = this.isActive ? 'red' : 'orange';
    console.log('there it is : \n', $event);
  }

}

4.5 event filtering

@Component({
  selector: 'course',
  template: '<input type="text" #email (keyup.enter)="onKeyUp(email.value)">'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses;
  isActive = false;
  bgColor = this.isActive ? 'red' : 'orange';
  imgUrl = 'https://i.udemycdn.com/course/240x135/1039988_d207_3.jpg';

  constructor(service: CourseService, email: EmailService) {
    this.courses = email.getCourse();
  }

  onKeyUp(email) {
    alert('entered: ' + email);
  }

  onSave($event) {
    $event.stopPropagation();
    this.isActive = true;
    this.bgColor = this.isActive ? 'red' : 'orange';
    console.log('there it is : \n', $event);
  }

}

4.6 Template varibles

• #email => email.value

@Component({
  selector: 'course',
  template: '<input type="text" #email (keyup.enter)="onKeyUp(email.value)">'
})
export class CourseComponent {
  title = 'LoopInsights';
  courses;
  isActive = false;
  bgColor = this.isActive ? 'red' : 'orange';
  imgUrl = 'https://i.udemycdn.com/course/240x135/1039988_d207_3.jpg';

  constructor(service: CourseService, email: EmailService) {
    this.courses = email.getCourse();
  }

  onKeyUp(email) {
    alert('entered: ' + email);
  }

  onSave($event) {
    $event.stopPropagation();
    this.isActive = true;
    this.bgColor = this.isActive ? 'red' : 'orange';
    console.log('there it is : \n', $event);
  }

}

4.7 Two way binding

• ngModel 双向数据绑定

  template: '<input type="text"  (keyup.enter)="onKeyUp()" [(ngModel)]="email" >'

4.8 Pipes

链接

search datapipe

5.Build Re-usable Components