「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)。
如果应用程序成功启动,将会显示以下消息屏幕。
步骤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%;
}
外观也变得更漂亮了。
下一步我们要做什么?
那是你想在“Hello World”应用程序中尝试的一切。
我们已经准备好创建使用Angular构建的出色应用程序了,现在让我们开始进行英雄之旅的教程。
在接下来的章节中,您可以更加详细地了解Angular项目的文件。