从零开始的Angular生活(一)— 环境搭建

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

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

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

《从零开始的Angular生活(一)— 环境搭建》

二、安装vscode

下载vscode

《从零开始的Angular生活(一)— 环境搭建》

安装时勾选下面选项

《从零开始的Angular生活(一)— 环境搭建》

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生活(一)— 环境搭建》

安装 angular-cli 语句:

npm install -g @angular/cli

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

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

四、搭建项目

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

《从零开始的Angular生活(一)— 环境搭建》

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

ng new my-app 

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

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

《从零开始的Angular生活(一)— 环境搭建》

注意:目测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

《从零开始的Angular生活(一)— 环境搭建》

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

《从零开始的Angular生活(一)— 环境搭建》

接下来在 /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项目的全部环境,那么下一篇我们将根据angular提供的官方demo继续学习angular。

    原文作者:Buzzer_Kuan
    原文地址: https://segmentfault.com/a/1190000016773661
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞