准备 Angular 教程环境

angular　チュートリアル環境準備

記事の対象者
環境
主な参考記事
そもそも Angular とは
導入
1.VScode を導入
2.はじめに node.js をインストールする

3.typescript のインストール

TypeScript って？
TypeScript の HelloWorld

4.angular cli のインストール
5.プロジェクト生成
5.1.あっ！エラーだ！
5.2.もう一度実行
6.実行確認
拡張機能

新闻报道的对象

我有一些关于编程的基础知识，但对于Web开发之类的东西完全不懂… Angular是个好选择吗？这是什么？适合那些对此完全不了解的人。
这篇文章关于环境设置。
这是一个相当概要的文章。

环境

在Windows10家庭版64位操作系统上，使用VSCode 1.45.1版本。

通过以下ng version命令进行确认：
@angular-devkit/architect版本为0.1001.1
@angular-devkit/core版本为10.1.1
@angular-devkit/schematics版本为10.1.1
@schematics/angular版本为10.1.1
@schematics/update版本为0.1001.1
rxjs版本为6.6.2

这些是主要的参考文章。

https://angular.jp/guide/setup-local 的中文表述如下：
https://qiita.com/yk0807/items/b2e2332979dfb35ad816 的中文表述如下：
https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750 的中文表述如下：

最初先从套裝上说，Angular是一种用于构建现代Web应用程序的开源JavaScript框架。

实现SPA（单页应用）的JavaScript框架
使用扩展了JavaScript的TypeScript。
实现了MVC模型。
另外，作为MEAN（MongoDB、Express、Angular、Node.js）软件处理的组成要素之一。
分别负责数据库、后端、前端和服务器。
根据我目前的理解，是Web页面的一个组成要素。除此之外，还可以学习Express和数据库，就能够完成服务器端的搭建啦！

引入

安装 VScode

我不太清楚。关于VS Code的引入，其他人肯定已经写出了不错的东西吧…

首先，需要安装 node.js。

https://nodejs.org/en/
我首先选择了LTS版本12.18.3。
启动后，我勾选了安装chocolatey的选项并继续。
chocolatey类似于Linux上使用的apt-get命令的Windows版本。

安装typescript

执行下列命令。 yǔ .)

‘终端：终端
npm 安装 -g typescript’

什么是TypeScript？

→ TypeScript 是由 Microsoft 开发的，在 JavaScript 上增加了类型定义等功能。

TypeScript 的 HelloWorld

创建一个名为tstest.ts的文件，并按照以下方式编写代码。

function helloWorld(name:string):void{
console.log("HelloWorld! "+name+"!");
}
let langName = "TypeScript";
helloWorld(langName)

所以，进行编译和运行

tsc .\tstest.ts  # コンパイル用コマンド
node .\tstest.js # 実行用コマンド

如果以下内容显示正常则表示OK。

HelloWorld! TypeScript!

使用 gulp 可以提高编译效率，对于编译方面可优化吗？

安装Angular CLI。

npm install -g @angular/cli

一个可以用于生成和运行Angular应用项目的命令行工具。当以”ng”作为命令开头时，可以认为正在使用Angular CLI。

项目创建

请执行以下操作。

ng new AngularTutorial

5.1. 哎呀！出错了！

在该系统中，由于禁用了脚本执行，无法加载文件 C:\Users\XXXX\AppData\Roaming\npm\ng.ps1。有关详细信息，请参阅 “about_Execution_Policies”（http
s://go.microsoft.com/fwlink/?LinkID=135170）。位置：行：1 字符：1。

- ng new AngularTutorial
- ~~
  - CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
  - FullyQualifiedErrorId : UnauthorizedAccess

看起来好像遇到了 PowerShell 的执行策略问题。
暂时决定以管理员权限来更改为永久设置。
打开 PowerShell 并执行以下命令。

Set-ExecutionPolicy RemoteSigned

再执行一次

由于更改了设置，所以需要重新执行。
我想要执行教程，所以给项目取一个不错的名称来生成。

ng new AngularTutorial

被问到 CSS 相关的问题，但保持默认状态按下回车键。

6. 运行验证

前往Angular教程并执行以下命令。

ng serve --open

顺便说一下，–open 是一个在浏览器中自动打开 http：//localhost:4200/ 的选项。

扩展功能

为了获得编辑器的自动补全功能，我希望安装扩展插件。
我正在使用这个插件。
Angular 10 代码片段 – TypeScript、Html 、Angular Material 、ngRx、RxJS & Flex 布局。