# Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/http.md # aio/content/guide/i18n.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule.md # aio/content/guide/npm-packages.md # aio/content/guide/pipes.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/structural-directives.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/marketing/index.html # aio/content/navigation.json # aio/content/tutorial/index.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/src/app/embedded/api/api-list.component.ts # aio/src/app/layout/doc-viewer/doc-viewer.component.ts # aio/src/app/layout/footer/footer.component.html # aio/src/app/layout/toc/toc.component.html # aio/src/app/search/search.service.ts # aio/src/styles/1-layouts/_marketing-layout.scss # aio/yarn.lock
21 KiB
QuickStart
快速上手
Good tools make application development quicker and easier to maintain than if you did everything by hand.
好的工具能让开发更加简单快捷。
The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
The goal in this guide is to build and run a simple Angular application in TypeScript, using the Angular CLI while adhering to the Style Guide recommendations that benefit every Angular project.
在这一章CLI快速起步中,我们的目标是构建并运行一个超级简单的Angular应用。我们会使用Angular-CLI来让每个Angular应用从风格指南中获益。
By the end of the chapter, you'll have a basic understanding of development with the CLI and a foundation for both these documentation samples and for real world applications.
在本章的末尾,我们会通过CLI对开发过程有一个最基本的理解,并将其作为其它文档范例以及真实应用的基础。
And you can also download the example.
你还可以 下载这个例子。
Step 1. Set up the Development Environment
步骤1. 设置开发环境
You need to set up your development environment before you can do anything.
在开始工作之前,我们必须设置好开发环境。
Install Node.js® and npm if they are not already on your machine.
如果你的机器上还没有**Node.js®和npm**,请先安装它们。
Verify that you are running at least node 6.9.x
and npm 3.x.x
by running node -v
and npm -v
in a terminal/console window.
Older versions produce errors, but newer versions are fine.
请先在终端/控制台窗口中运行命令 node -v
和 npm -v
,
来验证一下你正在运行 node 6.9.x
和 npm 3.x.x
以上的版本。
更老的版本可能会出现错误,更新的版本则没问题。
Then install the Angular CLI globally.
然后全局安装 Angular CLI 。
npm install -g @angular/cliStep 2. Create a new project
步骤2. 创建新项目
Open a terminal window.
打开终端窗口。
Generate a new project and skeleton application by running the following commands:
运行下列命令来生成一个新项目以及应用的骨架代码:
ng new my-appPatience, please. It takes time to set up a new project; most of it is spent installing npm packages.
请耐心等待。 创建新项目需要花费很多时间,大多数时候都是在安装那些npm包。
Step 3: Serve the application
步骤3. 启动开发服务器
Go to the project directory and launch the server.
进入项目目录,并启动服务器。
cd my-app ng serve --openThe ng serve
command launches the server, watches your files,
and rebuilds the app as you make changes to those files.
ng serve
命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
Using the --open
(or just -o
) option will automatically open your browser
on http://localhost:4200/
.
使用--open
(或-o
)参数可以自动打开浏览器并访问http://localhost:4200/
。
Your app greets you with a message:
本应用会用一条消息来跟你打招呼:

Step 4: Edit your first Angular component
步骤4. 编辑我们的第一个Angular组件
The CLI created the first Angular component for you.
This is the root component and it is named app-root
.
You can find it in ./src/app/app.component.ts
.
这个CLI为我们创建了第一个Angular组件。
它就是名叫app-root
的根组件。
你可以在./src/app/app.component.ts
目录下找到它。
Open the component file and change the title
property from Welcome to app!! to Welcome to My First Angular App!!:
打开这个组件文件,并且把title
属性从 Welcome to app!! 改为 Welcome to My First Angular App!! :
The browser reloads automatically with the revised title. That's nice, but it could look better.
浏览器会自动刷新,而我们会看到修改之后的标题。不错,不过它还可以更好看一点。
Open src/app/app.component.css
and give the component some style.
打开 src/app/app.component.css
并给这个组件设置一些样式

Looking good!
漂亮!
What's next?
接下来呢?
That's about all you'd expect to do in a "Hello, World" app.
如你所愿,我们完成了这个“Hello, World”应用。
You're ready to take the Tour of Heroes Tutorial and build a small application that demonstrates the great things you can build with Angular.
现在,你可以开始英雄指南教程,通过构建一个小型应用来学习如何用Angular构建各种大型应用了。
Or you can stick around a bit longer to learn about the files in your brand new project.
或者,你也可以稍等一会儿,学学在这个新项目中的文件都是干什么用的。
Project file review
项目文件概览
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
Angular CLI项目是做快速试验和开发企业解决方案的基础。
The first file you should check out is README.md
.
It has some basic information on how to use CLI commands.
Whenever you want to know more about how Angular CLI works make sure to visit
the Angular CLI repository and
Wiki.
你首先要看的文件是README.md
。
它提供了一些如何使用CLI命令的基础信息。
如果你想了解 Angular CLI 的工作原理,请访问 Angular CLI 的仓库及其
Wiki。
Some of the generated files might be unfamiliar to you.
有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
The src
folder
src
文件夹
Your app lives in the src
folder.
All Angular components, templates, styles, images, and anything else your app needs go here.
Any files outside of this folder are meant to support building your app.
你的应用代码位于src
文件夹中。
所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
这个文件夹之外的文件都是为构建应用提供支持用的。
File
|
---|
|
|
|
|
|
|
|
|
|
|
|
The root folder
根目录
The src/
folder is just one of the items inside the project's root folder.
Other files help you build, test, maintain, document, and deploy the app.
These files go in the root folder next to src/
.
src/
文件夹是项目的根文件夹之一。
其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/
平级。
File
|
---|
|
|
|
|
|
|
|
|
|
|
|