这篇文章中，我们将使用Angular来创建一个能够工作的网站！真的就是“临时性的”，不会过多解释细节！

准备好

请先获取Node.js，这是一组开发所需的程序（稍微随便说说）。
从官网下载并安装最新版本！

在这篇文章中，先创建一个文件夹作为Angular的工作区，我们将其命名为C:\angular_projects。

・准备一个文本编辑器
因为之后可能需要修改源代码。虽然这篇文章的内容程度的话，记事本也可以，但还是以Visual Studio Code为佳吗？

让我们安装TypeScript和AngularCLI。

因此，必须在Angular开发中安装这两个。只需启动命令提示符并输入以下命令即可。

npm install -g typescript

npm install -g @angular/cli

我们创建一个新项目吧。

这次做一个网站，用自己的宠物作为示例。
实际上我没有养宠物，哈哈！！！
项目名叫petpage吧。
在命令提示符中，切换到工作目录C:\angular_projects，然后输入以下命令。
（据说，ng来自”A “ng” ular”）

ng new petpage

在这个图片中，最后似乎出现了一些错误，但是总之，项目创建已经完成了，所以好！文件夹C:\angular_project\petpage已经自动创建，里面也自动创建了各种文件。我们继续进行接下来的步骤。

我们来创建两个新组件吧。

我希望在宠物介绍网站上准备狗和猫的页面。
因此我会创建狗和猫的组件。
在Angular中，我们以”组件”的单位来考虑内容。

在命令提示符中切换到文件夹C:\angular_project\petpage，并执行以下两个命令。

ng generate component dog

ng generate component cat

自動化过程中，文件会自动地不断地生成起来，真是轻松啊。

让我们修改一些文件。

当文件完成后，就可以开始编程了！
这次我们会修改四个文件。让我们按顺序逐个进行。

(1) 应用程序路由模块.ts

首先是C:\angular_projects\petpage\src\app\app-routing.module.ts。

这个文件用来写入路由信息，也就是分配给狗和猫的URL路径。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 猫コンポーネントと犬コンポーネントを参照できるようにインポート
import { CatComponent } from './cat/cat.component';
import { DogComponent } from './dog/dog.component';

// それぞれのコンポーネントにURLパスを対応付け
const routes: Routes =
  [
    { path: 'dog-page', component: DogComponent },
    { path: 'cat-page', component: CatComponent },
    { path: '', redirectTo: '/dog-page', pathMatch: 'full' }
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这次有两个组件，一个是Dog，一个是Cat。导入它们并给予DogComponent这样的名称，然后分配了一个名为dog-page的URL路径。

(2) 应用组件模板.html

下一步是C：\ angular_projects \ petpage \ src \ app \ app.component.html。
写下打开网站时显示的内容。

こんにちは！<br>
<router-outlet></router-outlet><br>

这次只是一个样例，所以让我们将其简化为仅有两行的超简洁版本哈哈。

改行的意思是换行对吗？
非常重要。它的秘密稍后会揭晓。

（3）狗的组件.html

接下来是C：\angular_projects\petpage\src\app\dog\dog.component.html。
我们要制作狗的页面。

いぬはかわいい！<br>
わんわん！<br>

(4) 猫.component.html

最后，将创建一个名为C:\angular_projects\petpage\src\app\cat\cat.component.html的猫页面。

ねこもかわいい！<br>
にゃーにゃー！<br>

完成了！

我们试着确认一下动作。

尝试在本地环境中运行

在命令提示符中转到文件夹C:\angular_project\petpage，并运行以下命令。

ng serve --open

即使不特意准备web服务器，只需使用先前的命令ng serve –open，就可以在本地环境中轻松确认显示。而且，在此状态下修改刚才操作的文件（例如app.component.html），会自动重新编译（也就是说，只需执行一次ng serve –open就可以了）。真方便！

查看页面内容

こんにちは！<br>
<router-outlet></router-outlet><br>

在位置处。

いぬはかわいい！<br>
わんわん！<br>

Angular的有趣之处在于通过插入这样的组件来构建一个完整的网站，而不是创造一个大而全的东西。这样的组件集合使团队开发变得更容易。

(3) 确认URL路径

最后

在这篇文章中，我以快速的步伐尝试使用Angular创建一个“可运行的东西”。
为什么它能运行？文件结构是怎样的？组件是如何相互协作的？样式表如何变化？数据绑定又是如何实现的…
关于这些，我还想另外写一篇文章。