第二节：Angular环境的建立

2 年 ago

新, 韵

2 minutes

目录：Web应用程序开发路线图

第二部分：Angular环境的设置

我们从这次开始创建Angular应用程序。
首先，安装作为Angular基础的Node.js。

安装Node.js。

介绍

Node.js是使用Chrome引擎的JavaScript运行时。通常情况下，JavaScript在浏览器中运行，但使用Node.js可以从命令行运行JavaScript程序。此外，Node.js还配备了npm（Node Package Manager），可以从GitHub获取并使用开源模块。

请特别注意细节

虽然我们希望从Node.js官方网站安装Node.js，但一旦安装后，卸载就会变得很麻烦。
由于开发项目需要指定Node.js的版本，因此我们应该安装一个可以轻松切换版本的工具。
除了Nodebrew(mac)和Nodist(win)等可以进行Node.js版本管理的工具外，我们这里将使用Nodebrew进行安装。

安装

请执行以下命令，安装nodebrew：
如果您是无法使用brew命令的mac用户，请从Homebrew官方网站进行安装。

  $ brew install nodebrew

为了能够使用命令行，我们会将环境变量PATH添加进去。
在~/.zprofile中写入以下一句。

export PATH=$HOME/.nodebrew/current/bin:$PATH

3) 我们可以使用下面的命令来确认 nodebrew 是否成功安装。

$ nodebrew -v
nodebrew 1.0.1

4）接下来，使用nodebrew安装Node.js。
使用以下命令显示可用的Node.js版本列表。

$ nodebrew ls-remote

5) 指定版本安装Node.js。这次我们将使用v14.9.0。

$ nodebrew install-binary v14.9.0
Fetching: https://nodejs.org/dist/v14.9.0/node-v14.9.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

6) 验证已安装Node.js。
您可以使用以下命令来验证您计算机上安装的Node.js版本。

$ nodebrew list
v14.9.0

current: v14.9.0

目前显示的是当前正在使用的Node.js版本。

7) 要切换使用已安装的多个版本，请执行以下命令。

$ nodebrew use v14.9.0

8) 确认 Node.js 是否成功安装。

$ node -v
v14.9.0
$ npm -v
6.14.8

安装Angular

介绍

Angular是一个使用Node.js开发的Web应用框架。此外，它还具有将Angular源代码构建为常见的html/css/js格式以及用于测试的服务功能。

安装

安装 Angular 的包 @angular/cli。
cli 是 Command Line Interface 的意思。

首先通过以下命令确认已发布的版本。

$ npm info @angular/cli versions

使用以下命令进行安装。这次我们将安装10.0.8版本。
-g选项代表全局安装。通常，通过npm安装的模块会安装在本地工作环境的包内，
但通过-g安装则会安装在系统内，可以从包内外使用。
请记住，cli基本上都需要通过-g进行安装。

$ npm install -g @angular/cli@10.0.8

3) 使用以下命令确认@angular/cli是否成功安装。
这是Angular的NG命令。

$ ng version

创建一个Angular项目

使用以下命令创建Angular项目。
将创建一个名为`front`的项目。

$ ng new front
? Would you like to add Angular routing? (y/N) -> y
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ]

scssを選択。css以外はcssを高度にしたもので、そのままではブラウザで読み込むことができないため、ビルドを通す必要があります。

等待一段时间，项目创建将完成。
以下文件将生成。

ファイル・フォルダ説明README.mdMarkDown形式で書かれたパッケージの説明ファイル、第三者に対して使い方などを記載します。angular.jsonAngularの設定ファイルe2eあまり気にしなくていいですkarma.conf.js自動試験用の設定ファイルnode_modules/npmでインストールされたモジュールがここに入りますpackage-lock.jsonnode_modulesを再現するための設定package.jsonNode.jsのパッケージ設定srcこれからAngularプロジェクトで作成するソースコード一式tsconfig.app.jsonTypeScriptの設定ファイルtsconfig.base.jsonTypeScriptの設定ファイルtsconfig.jsonTypeScriptの設定ファイルtsconfig.spec.jsonTypeScriptの設定ファイルtslint.jsonTypeScriptのLint設定ファイル。静的コードチェックのためのもの

node_modules/ -> 模块节点/

通过npm安装的模块将被安装在这个文件夹中。
即使删除这个文件夹，只要在包内执行$ npm install命令，node_modules文件夹将重新创建，因此在提交到git时应排除该文件夹。

package.json和package-lock.json

在package.json的dependencies和devDependencies中，用版本号指定了所需模块的包。但是，由于有类似于”^6.0.0″的指定，即指定版本6以上的范围，为了完全复现所使用的模块，需要package-lock.json文件。

使用Angular进行服务。

1) 安装Angular所需的模块

$ cd front
$ npm install

2) 提供服务

$ ng serve

3) 尝试使用浏览器访问

请尝试从浏览器访问 http://localhost:4200
如果显示了以下空的Web应用程序，则表示成功。

顺便说一下，通过执行下面的指令来进行构建，构建结果将输出到dist文件夹中。

$ ng build

这次就到这里。下次我们会制作登录页面。
我们开发的源代码已经上传到GitHub上了。