Angular基础教程 有大用

可以通过 node -v 以及 npm -v 的形式来检查是否安装成功

npm install -g @angular/cli  // 装的是最新的版本
npm install -g @angular/cli@xx.xx.x // 也可以安装指定版本

ng new project_name  // project_name用户可以自定义项目名
cd project_name
ng serve
浏览器输入http://localhost:4200 便可看到相关页面

// hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '<h1> {{title}} </h1>',
  styles: ['h1 { color: red; }']
})

export class HelloWorldComponent {
  public title = '学习Angular第一课';
}

// NgClass与表达式一起使用，通过ngClassHasColor来决定是否添加ngclass-color这个类
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <div [ngClass]="ngClassHasColor ? 'ngclass-color' : ''">练习Ngclass的使用</div>
  `,
  styles: [
    'h1 { color: red; }',
    '.ngclass-color {color: green}'
  ]
})

export class HelloWorldComponent {
  public ngClassHasColor = true;
}

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

@Component({
  selector: 'app-hello-world',
  template: `
  <div [ngStyle]="{'color': 'black', 'font-size': '18px'}">练习Ngstyle的使用</div>
  `,
  styles: []
})

export class HelloWorldComponent {}

// 或者我们可以将多个内联样式封装到一个对象中，这样我们就可以动态控制对象中的值，
// 只要将对象的变量直接赋值给[ngStyle]
2. import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <div [ngStyle]=ngStyleObj>练习Ngstyle的使用</div>
  `,
  styles: []
})

export class HelloWorldComponent {
  public ngStyleObj = {
    'color': 'black',
    'font-size': '18px'
  }；
}

// 在js中，如果需要渲染列表，我们是需要手动遍历数据，然后动态生成元素，这样才能实现列表的渲染
// 在angular中，我们仅仅需要使用NgFor这个语法糖就可以实现数据的循环展示
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <ul>
    <li *ngFor="let subject of studySubjects">{{subject}}</li>
  </ul>
  `,
  styles: []
})

export class HelloWorldComponent {
  public studySubjects = [
    '环境搭建',
    '项目目录介绍',
    '组件介绍',
    'ng-zorro组件库的引入介绍'
  ];
}
// 除此之外，我们还可以获取到循环对象的角标index，并在模板中使用它，如下所示：
<ul>
    <li *ngFor="let subject of studySubjects;  let i=index">{{ i+1 }} - {{ subject }}</li>
 </ul>

// 假如有个需求:
// 说是用户身份是’backend‘的就可以看到上述的循环列表；其他的用户都不能看到，在Angular中改怎么实现呢？
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <ul *ngIf="userRole === 'backend'">
    <li *ngFor="let subject of studySubjects;  let i=index">{{ i+1 }} - {{ subject }}</li>
  </ul>
  `,
  styles: []
})

export class HelloWorldComponent {
  public userRole='backend'; // 只要userRole的值不是backend，那么上述的列表就不会展示
}

// 现在假如有一个需求:
// 说是假如用户的年龄是12则显示小学毕业
// 假如用户的年龄是18则显示高中毕业
// 假如用户的年龄是22则显示大学毕业
// 其他情况全都显示未知
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <div [ngSwitch]="age">
   <span *ngSwitchCase="'12'">小学毕业</span>
   <span *ngSwitchCase="'18'">高中毕业</span>
   <span *ngSwitchCase="'22'">大学毕业</span>
   <span *ngSwitchDefault>未知</span>
  </div>
  `,
  styles: []
})

export class HelloWorldComponent {
  public age = 18;  // 页面显示”高中毕业“
}

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

@Component({
  selector: 'app-hello-world',
  template: `
  <img [src]="itemImageUrl">
  <button [disabled]="isDisabledBtn">Disabled Button</button>
  <span [innerHtml]="spanText"></span>
  `,
  styles: []
})

export class HelloWorldComponent {
  public itemImageUrl = '../../assets/bg.png';
  public isDisabledBtn = false;
  public spanText='通过属性绑定来展示span标签的内容';
}

//动态添加单个class和多个class
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `

  <div [class.textcolor]="isSingleClass">尝试绑定单个class</div>
  <div [class]="multipleClass">尝试绑定多个class</div>
  `,
  styles: [
    '.bgColor{background-color: yellow}',
    '.textcolor{color: red}'
  ]
})

export class HelloWorldComponent {
  public isSingleClass: boolean;
  public multipleClass = {  // 所以这里生效的只有bgColor这个类
    bgColor: true,
    textcolor: false,
  };
}

// 同理属性style也是一样的也可以像class一样

// 以date这个内置管道作为例子
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <p>小明的生日是{{ birthday | date }}</p>
  <p>小明的生日是{{ birthday | date:"MM/dd/yy" }}</p>
  `,
  styles: []
})

export class HelloWorldComponent {
  public birthday = new Date(1988, 3, 15);
}

//结果
小明的生日是Apr 15, 1988
小明的生日是04/15/88

//我们希望通过点击按钮实现一个累加器
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
  <button (click)="addCount()">当前数值加1</button>
  <span>当前值是：{{curNumber}}</span>
  `,
  styles: []
})

export class HelloWorldComponent {
  public curNumber = 1;

  public addCount(): void {
    this.curNumber++;
  }
}

<button (click)="addCount($event)">当前数值加1</button>

 public addCount(event): void {
    console.log(event);
    this.curNumber++;
  }

<button (click)="addCount($event, 5)">当前数值加1</button>

 public addCount(event, paramsNumber: number): void {
     this.curNumber = this.curNumber + paramsNumber; // 可以实现每次加5
  }

// 通过分号去分割两个方法
<button (click)="addCount($event, 5);consoleCount()">当前数值加1</button>

// 定义的两个方法
 public addCount(event: any, paramsNumber: number): void {
    this.curNumber = this.curNumber + paramsNumber;
  }

  public consoleCount(): void {
    console.log(this.curNumber);
  }

// template和style都是通过引入外层的文件，这样就可以把html和css的代码放到单独的文件进行开发
import { Component } from '@angular/core';

@Component({
  selector: 'app-outside-introduction',
  templateUrl: './outside-introduction.component.html',
  styleUrls: ['./outside-introduction.component.scss']
})

export class OutsideIntroductionComponent {}

// app-outside-introduction是app.component的子组件，现在通过这个组件来学习一下父子传值

// outside-introduction.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-outside-introduction',
  templateUrl: './outside-introduction.component.html',
  styleUrls: ['./outside-introduction.component.scss']
})

export class OutsideIntroductionComponent {
 // @Input()是专门用来实现传值的，需要提前在'@angular/core引入
 // 这句声明，表示希望在父组件引入子组件的html页面中，从父组件中传入一个值给到showNumber
  @Input() public showNumber: number;
}

// outside-introduction.component.html
<div>显示父组件传进来的值{{showNumber}}</div>

// 父组件app.component.html
<div>父组件中的值：{{defaultNum}}</div>
<app-outside-introduction [showNumber]="defaultNum"></app-outside-introduction>

// 父组件app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public defaultNum = 5;
}

1. 子组件通过@Input声明要进行通信的变量
@Input() public showNumber: number;

2.父组件在引入的时候通过属性绑定来传递在ts中定义好的变量
<app-outside-introduction [showNumber]="defaultNum"></app-outside-introduction>
export class AppComponent {
  public defaultNum = 5;
}

子组件
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-outside-introduction',
  templateUrl: './outside-introduction.component.html',
  styleUrls: ['./outside-introduction.component.scss']
})

export class OutsideIntroductionComponent {
  @Input() public showNumber: number;
  // 下边的逻辑主要实现自组价向父组件emit一个值
  @Output() public curCountChange = new EventEmitter<number>();
  public curCount = 1;
  public addCount(): void {
    this.curCount++;
    this.curCountChange.emit(this.curCount);
  }
}

父组件
// 这里的事件名curCountChange必须和子组件定义@Output()的名字是一样的，=后边的方法名可以自己随意定义
// `$event`是子组件传过来的值
<app-outside-introduction [showNumber]="defaultNum" (curCountChange)="handlCurCountChange($event)"></app-outside-introduction>

  public handlCurCountChange(value: number): void {
    // 这里的value就是子组件传过来的值
    this.valueFromChild = value;
  }

// 这个input其实是angular封装过的一个组件
// 这里用到双向绑定[(ngModel)]的前提是，需要在根组件中先将FormsModule导入进来
// import { FormsModule } from '@angular/forms';

 <input [(ngModel)]="inputValue">
 
 export class OutsideIntroductionComponent {
  public inputValue = 5;
}

<input [(ngModel)]="inputValue" (ngModelChange)="consoleValue($event)">

  public consoleValue(value: string): void {
    console.log(value);
  }

  以下为类型注解/类型定义
  
  public a: number;
  public b: boolean;
  public c: string;
  public d: any;
  public e: number[] = [1, 2, 31];
  public f: any[] = [1, true,'a', false];
  
  //枚举定义
  enum Color {
   Red,
   Green,
   Blue,
 }
  public backgroundColor = Color;
  // 如果使用backgroundColor.Red 返回的值就是0， 因为enum默认就是按照顺序排列里边的内容的

类型推断，像这些简单的类型，如果直接赋值的话，那么ts可以智能推断出这个什么类型
public curCount = 1;
public inputValue = 5;

/* You can add global styles to this file, and also import other style files */
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

{ "assets":[
    ...
    { "glob": "**/*", 
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", 
      "output": "/assets/" } 
      ],
  "styles": [ 
     ... 
     "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"]
  }