引入Angular
首先
请在上一篇关于”Angular是什么”的帖子的基础上更深入地理解Angular。
本次我想介绍关于引入Angular的内容。
安装Angular
我们来试一试。
[步骤1] 安装 Node.js
执行各个命令来安装Node.js。
使用Node.js的版本为14系列。
从网站下载 Node.js。
使用 curl 命令从 URL（https://rpm.nodesource.com/setup_14.x）下载目标。
以下是对于“▽コマンド”的中文本地化的一种表述方式：
▽指令
curl --silent --location https://rpm.nodesource.com/setup_14.x | sudo bash -
▽执行结果示例
[root@localhost html]# curl --silent --location https://rpm.nodesource.com/setup_14.x | sudo bash -
## Installing the NodeSource Node.js 14.x repo...
## Inspecting system...
・・・・・処理内容が流れます・・・・・・
## Run `sudo yum install -y nodejs` to install Node.js 14.x and npm.
## You may run dnf if yum is not available:
sudo dnf install -y nodejs
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
请你给我一杯咖啡。
安装 Node.js
安装您在步骤①中下载的 Node.js。
由于本次环境可以执行 yum 命令，所以我们使用 yum 进行安装。
请提供以下的选项 ▽命令 (Please provide the options for the ▽command.)
sudo yum install nodejs
▽执行结果例子
[root@localhost html]# sudo yum install nodejs
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
・・・・・処理内容が流れます・・・・・・
==================================================================================================================================================================================
Package アーキテクチャー バージョン リポジトリー 容量
==================================================================================================================================================================================
インストール中:
nodejs x86_64 2:14.19.2-1nodesource nodesource 33 M
トランザクションの要約
==================================================================================================================================================================================
インストール 1 パッケージ
総ダウンロード容量: 33 M
インストール容量: 93 M
Is this ok [y/d/N]:
在路上，确认会出现。
没有问题，请输入“y”并按下[Enter]键执行。
按照下面的方式进行处理，如果显示“完成！”则表示完成。
・・・・・処理内容が流れます・・・・・・
インストール:
nodejs.x86_64 2:14.19.2-1nodesource
完了しました!
请在中国用中文和平移下列内容，只需要一种选项：
进行Node.js安装的确认
[root@localhost html]# node -v
v14.19.2
请用中文将以下句子进行同义转述，只需要给出一个选项：
– The company is going through a hard time financially.
[步骤2] 安装 Angular-Cli
为了使用Angular，我们需要进行安装。
▽命令
▽指令
▽操作
npm install -g @angular/cli
请提供更具体的上下文或内容，以便我更好地为您提供翻译。”実行結果例” 这个词组无法准确地翻译为母语中文，因此我需要更多信息来进行翻译。感谢您的理解！
[root@localhost html]# npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng.js
> @angular/cli@13.3.5 postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see https://angular.io/analytics. Yes
+ @angular/cli@13.3.5
updated 1 package in 16.847s
请以中文原生方式改写以下句子，只需要提供一种选项：
1. The cat is sleeping on the mat.
[步骤3] 创建 Angular 项目
这个处理过程需要一段时间才能完成。
▽指令
ng new {プロジェクト名}
这次我们用「project」作为项目名称创建了一个项目。
根据上述命令中的「{项目名称}」指定的信息，将创建一个目录，所以最好用半角字符指定项目名称。
▽执行结果示例
[root@localhost html]# ng new project
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
・・・・・処理内容が流れます・・・・・・
? Packages installed successfully.
Successfully initialized git.
请用中文朗读和翻译以下内容：
当成功结束后，请确保已创建了Angular项目。
[root@localhost html]# cd project/
[root@localhost project]# ls -al
合計 836
drwxr-xr-x. 6 root root 4096 5月 16 13:11 .
drwxr-xr-x. 4 root root 53 5月 16 13:09 ..
-rw-r--r--. 1 root root 600 5月 16 13:09 .browserslistrc
-rw-r--r--. 1 root root 274 5月 16 13:09 .editorconfig
drwxr-xr-x. 8 root root 166 5月 16 13:11 .git
-rw-r--r--. 1 root root 548 5月 16 13:09 .gitignore
drwxr-xr-x. 2 root root 66 5月 16 13:09 .vscode
-rw-r--r--. 1 root root 1061 5月 16 13:09 README.md
-rw-r--r--. 1 root root 3045 5月 16 13:09 angular.json
-rw-r--r--. 1 root root 1424 5月 16 13:09 karma.conf.js
drwxr-xr-x. 596 root root 20480 5月 16 13:11 node_modules
-rw-r--r--. 1 root root 773846 5月 16 13:11 package-lock.json
-rw-r--r--. 1 root root 1070 5月 16 13:09 package.json
drwxr-xr-x. 5 root root 156 5月 16 13:09 src
-rw-r--r--. 1 root root 287 5月 16 13:09 tsconfig.app.json
-rw-r--r--. 1 root root 863 5月 16 13:09 tsconfig.json
-rw-r--r--. 1 root root 333 5月 16 13:09 tsconfig.spec.json
可以随机选择一个（only need one option）。
可以从中文出发重新表达以下内容：
[第四步] 启动Angular应用程序
一旦创建了Angular项目，我们将尝试启动并在浏览器中进行显示。
▽指令
ng serve --open
▽执行结果示例
▽实际执行结果样例
▽实际执行效果范例
▽实际运行结果案例
[root@localhost project]# ng serve --open
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 1.98 MB |
polyfills.js | polyfills | 294.79 kB |
styles.css, styles.js | styles | 173.22 kB |
main.js | main | 49.78 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.49 MB
Build at: 2022-05-16T04:27:41.805Z - Hash: 23933d2ee278e7a8 - Time: 5228ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? Compiled successfully.
初次启动或在触碰源代码时，可能会显示许多消息，但只要出现“编译成功。”的消息，就表示启动成功。
在浏览器中访问“http://localhost:4200/”即可显示Angular项目的初始页面。
然而，如果使用默认设置启动，将指定为localhost。
根据环境设置（如主机名、服务器名等），有时无法在localhost上访问。
※本次我们是在虚拟环境（VM）中进行创建。
在VM内部将apache的ServerName设置为”localhost”，并在PC端设置了hosts，但仍无法成功确认。
在这种情况下，我们可以尝试使用应用程序启动命令，并在选项中指定主机和端口进行启动。
以下是设置的选项：
+————————————————– ———– +
· NODE_OPTIONS = –max_old_space_size = 8192
避免内存错误
· –host = 192.168.56.109
指定主机（指定在VM内部固定的IP地址）
· –port = 4200
端口指定（当想要更改为4200之外的端口时进行指定）
+————————————————– ———– +
▽实际上选择并启动
[root@localhost project]# NODE_OPTIONS=--max_old_space_size=8192 ng serve --open --host=192.168.56.109 --port=4200
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
? Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 1.98 MB |
polyfills.js | polyfills | 294.79 kB |
styles.css, styles.js | styles | 173.22 kB |
main.js | main | 49.78 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.49 MB
Build at: 2022-05-16T04:18:20.060Z - Hash: 23933d2ee278e7a8 - Time: 9953ms
** Angular Live Development Server is listening on 192.168.56.109:4200, open your browser on http://192.168.56.109:4200/ **
? Compiled successfully.
? Browser application bundle generation complete.
5 unchanged chunks
Build at: 2022-05-16T04:18:20.597Z - Hash: 23933d2ee278e7a8 - Time: 378ms
? Compiled successfully.
请用中文进行下面的句子改述，只需要一种选项：
Please close the door.
最后
关于引入Angular的部分就是这样了。
在实际的开发中，还需要与后端诸如PHP的协同工作。
下次我们将介绍与PHP框架Laravel的协同工作。
