想做的事情

为了学习WEB应用开发，我打算制作一个能够在地图上显示注册位置周间天气预报的WEB应用程序。

这篇文章要做什么

从安装Angular（angular-cli）到生成Web应用程序的模板

可以参考的网站

非常感谢您提供的参考页面。

– Angular文档
– totoho’s WWW入门 – Angular入门

环境

Windows10专业版
PowerShell
Node.js（10.16.3LTS）
npm（6.9.0）
angular-cli（8.3.8）

使用技术

[前端框架] Angular
[地图库] Leafret
[天气服务] Openweathermap
[数据库] MongoDB

角度

谷歌正在开发的前端JavaScript框架。它是用TypeScript实现的。
据说它可以构建MVC（模型-视图-控制器）或MVW（模型-视图-任意）模型。
它还可以处理路由功能，所以只需这个框架就能轻松地创建Web应用程序。

Angular CLI (命令行界面)

用于Angular开发的命令行工具
在Node.js上运行，自动执行生成每个组件和启动服务器等任务。

叶子

OSS的地图库。用于显示/控制同样是OSS地图瓦片的OpenstreetMap。

蒙古数据库

一种被广泛用于与Angular结合的数据库是NoSQL类型的数据库，也被称为MEAN堆栈中的经典数据库。

系统配置

只需要一个选项的话，可以这样简洁地表达：就像这样

安装Angular并生成一个项目模板。

Angular CLI (Angular Command Line Interface) 可以被简写为 angular-cli。

使用npm安装Angular-cli
使用-g选项进行全局安装

> npm install -g @angular/cli

准备工作区并生成初始应用程序。

在合适的工作目录中，使用Angular-cli命令进行初始构建。

> ng new my-app

请问您想要添加Angular路由吗？ (y/N)

安装完所需的库和其他文件后，使用”cd my-app”命令切换到目录。使用”ls”命令可以看到各种文件已经创建了。

/myapp
– 源代码
– .editorconfig
– .gitignore
– angular.json
– browserslist
– karma.conf.js
– package.json
– package-lock.json
– README.md
– tsconfig.app.json
– tsconfig.json
– tsconfig.spec.json
– tslint.json
– .git
– e2e
– node_modules

服务器启动

使用 ng serve 命令启动 Web 服务器。

> ng serve
(中略)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.

我试着编辑

打开src/app/app.component.html文件进行编辑，因为这是实际内容。
※请删除所有现有源代码。

<h1>AngularでWEBアプリケーションを作ってみる</h1>

保存后，在ng serve的命令行中将自动执行编译。

i ｢wdm｣: Compiling...

Date: 2019-10-06T03:47:14.667Z - Hash: 14dbbd95520c919d3d31
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 23.1 kB [initial] [rendered]
Time: 120ms
i ｢wdm｣: Compiled successfully.

当我打开浏览器看时，页面已经更新了。

组件生成

听说Angular是一个构建屏幕组件并进行组合的机制，所以我立即尝试使用ng generate component命令创建一个组件。

通过使用ng serve命令启动的进程能够自动检测文件更新并进行自动构建和部署，所以不需要终止该进程，可以打开新的控制台进行工作。

> ng g component header
CREATE src/app/header/header.component.html (21 bytes)
CREATE src/app/header/header.component.spec.ts (628 bytes)
CREATE src/app/header/header.component.ts (269 bytes)
CREATE src/app/header/header.component.css (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
> ng g component menu
CREATE src/app/menu/menu.component.html (19 bytes)
CREATE src/app/menu/menu.component.spec.ts (614 bytes)
CREATE src/app/menu/menu.component.ts (261 bytes)
CREATE src/app/menu/menu.component.css (0 bytes)
UPDATE src/app/app.module.ts (549 bytes)
> ng g component dashboard
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (281 bytes)
CREATE src/app/dashboard/dashboard.component.css (0 bytes)
UPDATE src/app/app.module.ts (643 bytes)

※g是generate的简写

在仪表盘页面添加组件

在app.component.html中描述生成的组件。

<app-header></app-header>
<app-menu></app-menu>
<app-dashboard></app-dashboard>

保存后，会在屏幕上显示出来。

画面虽然难以理解，但由三个组件组合构建而成。

组件编辑

编辑生成的空组件并构建Web应用程序的基础部分。

标题栏

请编辑在 src/app/header 中生成的 HTML 和 CSS。

<p>header works!</p>

向左走

<div class="header">
  <img src="../favicon.ico" alt="Angular"> AngularでWEBアプリ作ってみた
</div>

在Angular中使用内置的WEB服务器所具有的默认favicon图标。

.header {
    padding: 4px;
    background-color: #29088A; /*背景は紺色*/
    color: #FFF;               /*文字は白色*/
  }
  .header img {
    width: 18px;
    vertical-align: middle;
  }

自动反映在页面的页眉部分的画面

我没有按F5刷新浏览器。它自己就自动更新了。太厉害了。

菜单

需要同樣的方式修改 src/app/menu 的檔案。

<div class="menu">
        <ul>
        <li><a href="/">Dashboard</a></li>
        </ul>
</div>

.menu {
    background-color: #CED8F6; /*背景は薄青*/
  }
  .menu li {
    padding: 4px 8px;
    display: inline-block;
  }

仪表盘

同样，src/app/dashboard也是如此。

<h1>ダッシュボード</h1>
ここにいろいろ表示する

编辑后的画面 de

慢慢地开始变得像Web应用程序了。

暂时先到这里吧。辛苦了，谢谢。

下次的计划

创建一个用于注册城市的界面（组件/服务）
通过调用Openweathermap的API来获取天气信息

追加 (链接)

1. Angular环境搭建和生成模板
2. 添加组件和服务（注册页面）
3. 调用Openweathermap的API
4. 使用Leaflet显示地图
5. 检测服务属性的更新