「Angular QuickStart v4.3.3」的日本語翻譯(最新版本)

Angular公式网站的Angular QuickStart 已经更新为v4.3.3版本的支持。请访问https://angular.io/guide/quickstart。

由于似乎还没有日语翻译页面存在,所以我尝试着制作了一份日语翻译。
(虽然只依赖Google翻译,我感到很抱歉…)

目前还未完成全部的制作,但会逐步扩充。

快速开始

使用优秀的工具能够使应用程序开发比全手工操作更快速简单。

Angular CLI是一个命令行界面工具,可以用于创建项目、添加文件以及执行各种进行中的开发任务,包括测试、打包和部署等。

本指南的目的是使用Angular CLI在TypeScript中构建和运行一个简单的Angular应用程序,同时遵守有助于Angular项目的样式指南推荐事项。

在本章的最后,将会介绍使用CLI进行开发的基础知识,以及这些文档示例的基础知识,以及实际应用程序的基础知识。

另外,您也可以下载示例。

步骤1. 设置开发环境

在进入任务之前需要设置开发环境。

如果您还没有安装Node.js和npm,请参考以下步骤进行安装。

【Windows操作系统】在Windows上安装Node.js / npm – Qiita。

【Mac】在Mac上安装node.js的步骤。 – Qiita

即使已经安装,也请在终端/控制台窗口中运行node -v和npm -v来确认node版本为6.9.x或更高,npm版本为3.x.x或更高。如果版本比上述要求旧,则会发生错误。

然后在终端/控制台窗口中执行以下命令,将 Angular CLI 全局安装。

npm install -g @angular/cli

步骤二:创建新项目

打开终端窗口。

执行以下命令,生成一个新的项目和应用程序的模板。

ng new my-app

由于设置新项目需要一些时间,请稍等片刻。
安装npm包可能需要一些时间。

第三步:启动应用程序

请执行以下命令,进入项目目录并启动服务器。

cd my-app
ng serve --open

运行ng serve命令会启动服务器并监视文件的更改。
一旦检测到文件的更改,应用程序将自动更新。

使用”-o”参数时,浏览器将自动启动并打开首页(http://localhost:4200)。

如果应用程序成功启动,将会显示以下消息屏幕。

app-works.png

步骤4: 修改Angular组件

使用Angular CLI创建了初始状态的Angular组件。

这是一个根组件,被命名为app-root。

请打开./src/app/app.component.ts文件, 将title属性从「Welcome to app!!」改为「My First Angular App」。

export class AppComponent {
  title = 'My First Angular App';
}

当检测到文件更改时,浏览器将自动刷新页面。
标题已经改变。

太棒了!让我们稍微改善一下外观吧。

请打开./src/app/app.component.css文件,在组件中设置样式。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
my-first-app.png

外观也变得更漂亮了。

下一步我们要做什么?

那是你想在“Hello World”应用程序中尝试的一切。

我们已经准备好创建使用Angular构建的出色应用程序了,现在让我们开始进行英雄之旅的教程。

在接下来的章节中,您可以更加详细地了解Angular项目的文件。

广告
将在 10 秒后关闭
bannerAds