angular2学习（一）——入门

学习参考链接

官网：angular.io
脚手架：https://ng.ant.design/components/modal/zh
入门联系：https://angular.cn/start

1、环境搭建

1.1 工具介绍：

• （1） node.js: 是一个基于ChromeV8 引擎的javaScript运行时环境。新版本的nodejs中包含npm, 其中npm是包管理工具。
• （2） angular/cli： angular 脚手架
  注：早期有使用webpack的，Angular Cli 是基于 Webpack 封闭的一个Angular命令行工具
• （3）IDE： vscode

1.2

1.2.1 nodejs:

注意版本问题：版本过低可能会导致如下情况：

• (1)下载地址：https://nodejs.org/en/download/
• (2)验证安装是否成功
• nodejs:

node -v

npm:

npm -v

1.2.2 安装：angular/cli

npm install  -g @angular/cli

验证是否安装成功

ng v

备注：若想重新卸载以及安装

Npm uninstall -g @angular/cliNpm cache cleanNpm install -g @angular/cli@latest 
出现“Please take the following steps to avoid issues:"npm install --save-dev @angular/cli@latest"”提示输入命令行语句：npm install --save-dev @angular/cli@latest

1.2.3 安装chrome扩展

https://augury.angular.io/

1.2.4 安装IDE: vsCode

下载地址:
https://code.visualstudio.com/
直接安装即可
在vscode安装插件

1.2.4.1 vscode 使用教程：

https://segmentfault.com/a/1190000017949680?utm_source=tag-newest
vscode下面git 的使用

2、第一个demo

2.1 利用现有环境搭建

ng new appName

在运行过程出现如下问题

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

2.2 运行程序

切换目录
运行程序

ng serve --open

2.3 文件结构分析

程序触发启动：main.ts——> AppModule——>AppComponent