目录

 

1、angular安装

2、初始化项目

3、组件

四、模块：

五、TypeScript介绍

六、TypeScript环境搭建

七、TypeScript数据类型

八、TypeScript解构赋值

久、TypeScript剩余参数

---

本文是在黑马视频中学习过程中获取的信息。

一、angular安装

安装node.js

安装npm

安装python

安装C++编译工具

npm install --global --production windows-build-tools

安装脚手架

cnpm i -g @angular/cli

#查看版本

ng --version

出现下面信息表示成功：

二、初始化项目

找一个目录。执行：

D:\Web前端工作空间>

ng new angular-demo

切换到 angular-demo文件夹，执行：

ng serve

启动成功之后访问：http://localhost:4200/

e2e是端到端的存放测试文件的目录

src是存放业务代码的地方

main.ts是整个模块化系统的执行入口。主要作用是

• 加载根模块
• 启动执行模块系统

文件目录：

 

三、组件

angular一切都是围绕组件进行的

在angular中，一个组件就是一个类

例如：app.component.ts中：

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

//在angular中，一个组件就是一个类

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'APP统一支撑平台';
}

angular的基本使用：

ts：

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

//在angular中，一个组件就是一个类

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'APP统一支撑平台';
  count=0
  increment = function(){
  	this.count++
  }
}

html：

<h1>hello word</h1>

<h2>{{count}}</h2>

<button (click)="increment()">点击自增</button>

<!-- 使用foo组件-->
<app-foo></app-foo>

css：

h1 {
	color: red
}

创建一个foo组件：在项目根目录下面执行命令即可

D:\Web前端工作空间\angular-demo>

ng generate component foo

四、模块：

五、TypeScript介绍

六、TypeScript环境搭建

如果使用angular脚手架搭建的环境，就不需要自己去搭建环境了

在线环境：https://www.tslang.cn/play/index.html

七、TypeScript数据类型

参考官方文档：https://www.tslang.cn/docs/handbook/basic-types.html

八、TypeScript解构赋值

数组解构赋值：

对象解构赋值：（将name属性重新命名）

函数参数解构赋值：

参数为对象时：

久、TypeScript剩余参数

数组展开操作：

对象展开操作：