在学习Angular之前，我希望了解以下内容

2 年 ago

新, 韵

2 minutes

首先

最近我遇到了一个例子，我常常想「最好一开始就告诉我嘛！」。这个例子是关于Angular。我觉得，如果我在半年前写下这篇文章来教给那个时候的自己，也许能对那些也遇到同样问题的人有一点帮助。

Anguar是什么？简单来说。

最近，具有丰富表现力的Web应用程序在前端（即浏览器）上运行了许多JavaScript程序。由于从头开始制作这样的Web应用程序非常困难，Google开发了Angular框架来帮助我们。

Angular的特点

コンポーネント試行で部品の再利用がしやすい

总的来说，它适用于大规模开发。对我来说，TypeScript很吸引人。由于我不擅长JavaScript，所以我认为使用Angular来制作无论规模大小都是一个不错的选择。

顺便说一句，有一个叫做AngularJS的东西，这是Angular的前身框架，与Angular几乎没有兼容性。在搜索时要小心。

关于 Node.js

你知道Node.js吗？这是一个关于Node.js的解释，可以让任何人都能明白它的好处。

Node.js 包含了 JavaScript 的执行环境。虽然通常被称为服务器端 JavaScript，但它的用途不仅限于服务器。在不是浏览器中运行的 JavaScript 程序都是在 Node.js 上运行。Angular 在开发的各个方面，如编译、测试、部署等，都使用了 Node.js，而且没有 Node.js，甚至连 Angular 开发环境的安装都无法完成，所以 Node.js 是必不可少的。尽管在开发时需要 Node.js，但对用户的个人电脑来说，不需要安装 Node.js。

由于Node.js非常方便，因此涌现了很多软件包。于是我们希望有一种安装这些软件包的方式。npm是一个用于安装Node.js软件包的工具，它会自动下载所需的文件。关键在于”所需的文件”。例如，使用Angular开发时必须安装TypeScript编译器，如果自己的计算机上没有安装TypeScript编译器，npm在安装Angular开发工具时会将其一并下载。顺便说一下，npm会与Node.js安装程序一起安装。

关于TypeScript

TypeScript是一种被称为转译器语言的语言。TypeScript编译器能够将TypeScript程序转换为JavaScript。
JavaScript在表达自由度较高的同时，也存在编写棘手代码的缺点，而TypeScript可弥补这一点。
如果开发人员都有高意识，那么使用JavaScript进行开发是没有问题的。但是，如果开发人员的技能参差不齐，一些人会遇到编写棘手代码的困扰。而如果使用TypeScript编写，则编译器将检查和排查不合理的棘手代码，比纯JavaScript开发更加可靠。
人们常说TypeScript与C#相似，这也是有原因的，因为它们的作者是一样的。如果熟悉C#，我认为TypeScript更容易上手。

为了创建Angular项目，需要进行环境配置。

首先，从以下网址下载Node.js并完成安装：https://nodejs.org/ja/。安装完成后，您可以使用选项-v来查看版本，并进行功能确认。

$ node -v
v14.15.0

在Angular的开发中，我们使用一个名为Angular CLI（Command Line Interface）的命令行工具。要安装Angular CLI，需要使用先前解释过的npm工具。

$ npm install @angular/cli

你知道的指令和你这么想的有点不一样吗？为了解释清楚，我给你解释一下。

关于 npm 的 -g 选项

当阅读类似于「Angular入门」的内容时，上述命令变为
npm install -g @angular/cli。
区别在于前后是否有-g选项。

-g表示全局安装。全局安装的反义词是本地安装。解释起来全局安装更容易，但后来（大约半年后）会后悔的事情。如果选择了本地安装，只能在安装的目录下执行命令。如果认为全局安装更方便，就会有以下的缺点。

アンインストールが面倒

在Angular中，“无法共存不同版本”的缺点尤为突出。
Angular每半年进行一次重大更新，而且不向下兼容。如果将半年前编写的源代码在最新环境中编译，很有可能会失败。因此，推荐使用本地安装，但需要一些技巧。

安装时的技巧

相对于全局安装，下面将进行说明。当您全局安装Angular CLI时，创建Angular项目的模板大致包含以下步骤。

执行ng new 项目名称命令
执行上述命令后将创建项目名称的目录，并在其中创建Angular项目的模板

对于上述情况，如果进行本地安装，需要以下技巧。

在本地安装的情况下，安装目录将位于执行npm install命令的当前目录下。为了更好地了解安装了哪些内容，最好在执行npm install之前先创建一个目录，并在该目录下执行npm install。第三行指定了一个名为”–no-save”的选项，这是为了在此时不生成package.json。如果不这样做，后续的命令会尝试创建package.json，从而导致冲突发生。

$ mkdir プロジェクト名

$ cd プロジェクト名

$ npm install @angular/cli --no-save

2. ng命令执行的技巧
当安装Angular CLI后，就可以使用ng命令（简称Angular）了。但是，由于路径没有被添加到本地安装目录中，即使直接输入ng命令也不会生效。虽然添加路径也是一个选择，但更简单的方法是使用npx命令。在命令前加上npx，就可以执行已经本地安装的npm包。对于了解Linux的人来说，可能觉得这像是“sudo命令一样”。顺便提一下，npx也是随同Node.js一起安装的工具。

我将进行Angular CLI的版本检查以确认其功能。版本检查的命令是ng version。请在命令前面加上npx，然后执行如下。

$ npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

如果能够出现”Angular CLI”的ASCII艺术，那就可以了。

3.关于创建模板的目录技巧
创建Angular项目模板的命令是ng new。只需执行npx ng new 项目名称，项目模板将被创建在当前目录下。然而，由于当前目录的名称也是项目名称，所以在”项目名称”目录下会有一个名为”项目名称”的目录，这样显得很不好看。
虽然这只是个外观问题，但在需要“复制相同环境”的情况下（例如，想在其他电脑上创建相同环境等等），这种情况会带来不便。因此，希望将模板创建在最初创建的目录中。

当你想要指定一个创建模板的位置时，可以使用–directory选项。本次我们将在执行命令的当前目录中创建模板，所以以下是命令的形式。

$ npx ng new HelloWorld --directory=./

在此之后，我将回答问题，但是所有的答案都是“是”的，没有问题。还有一个问题是“样式表采用什么？”如果没有特别要求的话，我认为使用CSS也可以。

? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
> 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                                         ]