11/9/2017 Angular - QuickStart

FEATURES DOCS RESOURCES EVENTS BLO

QuickStart

Contents
Step 1. Set up the Development Environment

Step 2. Create a new project

Step 3: Serve the application

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 les, and
perform a variety of ongoing development
tasks such as testing, bundling, and
deployment.

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 benet
every Angular project.

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.

And you can also download the example.

Step 1. Set up the

Development Environment

You need to set up your development

environment before you can do anything.

https://angular.io/guide/quickstart 1/13
11/9/2017 Angular - QuickStart

Install Node.js and npm if they are not

FEATURES DOCS
already on your machine.
RESOURCES EVENTS BLO

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 ne.

Then install the Angular CLI globally.

npm install -g @angular/cli

Step 2. Create a new project

Open a terminal window.

Generate a new project and skeleton

application by running the following
commands:

ng new my-app

Patience please. It takes time to set up

a new project, most of it spent
installing npm packages.

Step 3: Serve the application

Go to the project directory and launch the

server.

cd my-app
ng serve --open

https://angular.io/guide/quickstart 2/13
11/9/2017 Angular - QuickStart

The ng serve command launches the

FEATURES DOCS RESOURCES
server, watches your les, and rebuilds the
EVENTS BLO
app as you make changes to those les.

Using the --open (or just -o ) option will

automatically open your browser on
http://localhost:4200/ .

Your app greets you with a message:

Step 4: Edit your rst

Angular component

The CLI created the rst Angular component

for you. This is the root component and it is
named app-root . You can nd it in
./src/app/app.component.ts .

Open the component le and change the

title property from Welcome to app!! to
QuickStart
Welcome to My First Angular App!!:

Step 1. Set up
src/app/app.component.ts the Development
Environment
export class AppComponent {
Step 2. Create a
title = 'My First Angular
new project
App';
} Step 3: Serve the
application
https://angular.io/guide/quickstart 3/13
11/9/2017 Angular - QuickStart

The browser reloads automatically with the

Step 4: Edit your
FEATURES DOCS RESOURCES
revised title. That's nice, but it could look
EVENTS BLO
rst Angular
better.
component

GETTING STARTED Open src/app/app.component.css and give What's next?

TUTORIAL the component some style. Project le

review
1. Introduction
src/app/app.component.css
The src folder
2. The Application Shell

3. The Hero Editor

h1 { The root folder
color: #369; Next Step
4. Displaying a List font-family: Arial,

5. Master/Detail Components Helvetica, sans-serif;

font-size: 250%;
6. Services
}
7. Routing

8. HTTP

FUNDAMENTALS

TECHNIQUES

API Looking good!

stable (v5.0.1)
What's next?

That's about all you'd expect to do in a

"Hello, World" app.

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.

Or you can stick around a bit longer to learn

about the les in your brand new project.

Project le review

An Angular CLI project is the foundation for

both quick experiments and enterprise
solutions.

The rst le you should check out is

README.md . It has some basic information on

https://angular.io/guide/quickstart 4/13
11/9/2017 Angular - QuickStart

how to use CLI commands. Whenever you

FEATURES DOCS RESOURCES
want to know more about how Angular CLI
EVENTS BLO
works make sure to visit the Angular CLI
repository and Wiki.

Some of the generated les might be

unfamiliar to you.

The src folder

Your app lives in the src folder. All Angular

components, templates, styles, images, and
anything else your app needs go here. Any
les outside of this folder are meant to
support building your app.

src

app

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

assets

.gitkeep

environments

environment.prod.ts

environment.ts

favicon.ico

index.html

main.ts

polylls.ts

styles.css

test.ts

tscong.app.json

tscong.spec.json

https://angular.io/guide/quickstart 5/13
11/9/2017 Angular - QuickStart

FEATURES DOCS RESOURCES EVENTS BLO

File Purpose

app/app.component. Denes the

{ts,html,css,spec.ts} AppComponent a

with an HTML
template, CSS
stylesheet, and a
test. It is the root
component of wh
become a tree of
nested compone
the application
evolves.

app/app.module.ts Denes AppModul

the root module t
tells Angular how
assemble the
application. Righ
it declares only th
AppComponent . S

there will be more

components to
declare.

assets/* A folder where yo

put images and
anything else to b
copied wholesale
you build your
application.

environments/* This folder conta

one le for each o
your destination
environments, ea
exporting simple
conguration var
to use in your
application. The

https://angular.io/guide/quickstart 6/13
11/9/2017 Angular - QuickStart

are replaced on-t

FEATURES DOCS RESOURCES
when you build y
EVENTS BLO
app. You might u
dierent API end
for development
you do for produc
or maybe dieren
analytics tokens.
might even use s
mock services. E
way, the CLI has
covered.

favicon.ico Every site wants

look good on the
bookmark bar. Ge
started with your
own Angular icon

index.html The main HTML p

that is served wh
someone visits yo
site. Most of the
you'll never need
edit it. The CLI
automatically add
js and css le

when building yo
so you never nee
add any <script
<link> tags her

manually.

main.ts The main entry p

for your app. Com
the application w
JIT compiler and
bootstraps the
application's root
module ( AppModu
to run in the brow
You can also use

https://angular.io/guide/quickstart 7/13
11/9/2017 Angular - QuickStart

AOT compiler wit

FEATURES DOCS RESOURCES
changing any cod
EVENTS BLO
appending the --
ag to the ng bu
and ng serve
commands.

polyfills.ts Dierent browser

have dierent lev
support of the we
standards. Poly
help normalize th
dierences. You s
be pretty safe wit
core-js and

zone.js , but be

to check out the

Browser Support
for more informat

styles.css Your global styles

here. Most of the
you'll want to hav
local styles in you
components for e
maintenance, but
styles that aect
your app need to
a central place.

test.ts This is the main e

point for your uni
tests. It has some
custom congura
that might be
unfamiliar, but it's
something you'll
to edit.

tsconfig. TypeScript comp

{app|spec}.json conguration for
Angular app
https://angular.io/guide/quickstart 8/13
11/9/2017 Angular - QuickStart

( tsconfig.app.j
FEATURES DOCS RESOURCES
and for the unit te
EVENTS BLO
( tsconfig.spec.

The root folder

The src/ folder is just one of the items

inside the project's root folder. Other les
help you build, test, maintain, document, and
deploy the app. These les go in the root
folder next to src/ .

my-app

e2e

app.e2e-spec.ts

app.po.ts

tscong.e2e.json

node_modules/...

src/...

.angular-cli.json

.editorcong

.gitignore

karma.conf.js

package.json

protractor.conf.js

README.md

tscong.json

tslint.json

File Purpose

e2e/ Inside e2e/ live th

end-to-end tests.
They shouldn't be
inside src/ becau
https://angular.io/guide/quickstart 9/13
11/9/2017 Angular - QuickStart

e2e tests are really

FEATURES DOCS RESOURCES
separate app that ju
EVENTS BLO
so happens to test
your main app. Tha
also why they have
their own
tsconfig.e2e.json

node_modules/ Node.js creates th

folder and puts all

third party modules
listed in
package.json insi

of it.

.angular-cli.json Conguration for

Angular CLI. In this
le you can set
several defaults and
also congure what
les are included
when your project i
built. Check out the
ocial
documentation if yo
want to know more

.editorconfig Simple conguratio

for your editor to
make sure everyone
that uses your proje
has the same basic
conguration. Most
editors support an
.editorconfig le

See
http://editorcong.o
for more informatio

.gitignore Git conguration to

make sure
autogenerated les
https://angular.io/guide/quickstart 10/13
11/9/2017 Angular - QuickStart

are not commited to

FEATURES DOCS RESOURCES
source control.
EVENTS BLO

karma.conf.js Unit test

conguration for the
Karma test runner,
used when running
ng test .

package.json npm conguration

listing the third part

packages your
project uses. You c
also add your own
custom scripts here

protractor.conf.js End-to-end test

conguration for
Protractor, used
when running ng
e2e .

README.md Basic documentatio

for your project, pre
lled with CLI
command
information. Make
sure to enhance it
with project
documentation so
that anyone checkin
out the repo can bu
your app!

tsconfig.json TypeScript compile

conguration for yo
IDE to pick up and
give you helpful
tooling.

tslint.json Linting conguratio

https://angular.io/guide/quickstart 11/13
11/9/2017 Angular - QuickStart

for TSLint together

FEATURES DOCS RESOURCES
with Codelyzer, use
EVENTS BLO
when running ng
lint . Linting helps

keep your code sty

consistent.

Next Step

If you're new to Angular, continue with

the tutorial. You can skip the "Setup"
step since you're already using the
Angular CLI setup.

RESOURCES HELP COMMUNITY LANGUAGES

About Stack Overow Events

Resource Listing Gitter Meetups
Press Kit Report Issues Twitter
Blog Code of Conduct GitHub
Contribute

Powered by Google 2010-2017. Code licensed under an MIT-style License. Documentation

licensed under CC BY 4.0.

Version 5.0.2-build.36613+sha.28985cb.

https://angular.io/guide/quickstart 12/13
11/9/2017 Angular - QuickStart

https://angular.io/guide/quickstart 13/13