从零开始的Angular生活（一）— 环境搭建

本篇中，我们将使用angular-cli来构建我们的第一个angular项目。

一、安装Node.js及npm包管理工具

下载 Node.js：推荐下载 8.12.0 版本，较为稳定，下载后安装即可。

二、安装vscode

下载vscode

安装时勾选下面选项

vscode 插件推荐

Chinese (Simplified) Language Pack for Visual Studio Code ：适用于 VS Code 的中文（简体）语言包
Angular 7 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout：Angular 代码片段
VSCode simpler Icons with Angular：Angular 文件图标样式
TSLint ：TypeScript 代码规范工具
Beautiful：代码格式化插件

三、安装相关环境

打开vscode后，使用快捷键 Ctrl + ` 或 查看 -> 终端，打开终端。

安装 angular-cli 语句：

npm install -g @angular/cli

科学上网：使用淘宝镜像解决部分安装包无法下载问题。（可能会造成package的安装问题）

npm install -g cnpm --registry=https://registry.npm.taobao.org

四、搭建项目

在电脑中创建angular文件夹来存放你的项目，而后创建一个文件夹，右键点击文件夹并选择 open with vscode。终端路径会自动打开至当前文件夹。

使用命令创键一个新的项目。

ng new my-app 

因为网络问题，最好新建项目是加入 --skipInstall 来跳过安装步骤，再使用 npm install 进行安装。

ng new my-app --skipInstall
cd my-app
npm install

注意：目测angular项目无法使用cnpm安装，所以尽量不要安装cnpm。但是如果不使用cnpm，可以会出现由于网络问题无法安装node-sass。这里提供一个解决办法：只针对node-sass使用淘宝镜像下载

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

五、运行

在终端中键入下面的命令运行项目，项目地址：http://localhost:4200/

ng serve --open

这样我们的项目就可以运行了。

接下来在 /src/app/app.component.ts 修改为如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'my-app';
  hello = 'HelloWorld!';
}

在/src/app/app.component.ts文件的 <h1> Welcome to {{ title }}! </h1> 后面添加

<h1>{{ hello }}</h1>

我们的第一个Angular项目创建了成功。

总结

现在我们的电脑已经具备了创建angular项目的全部环境，那么下一篇我们将根据angular提供的官方demo继续学习angular。