Angular 2 CLI aka Command Line Interface is developed to get started quickly for building Angular 2 apps, especially when the entire community felt that setting up Angular 2 development environment was cumbersome.
With introduction of Angular CLI, it’s now easier than ever to create, run builds, do E2E (end to end) tests, run apps and deploy Angular 2 application.
In this article, I will build a very basic Angular 2 application exclusively using CLI. So lets started.
What we will learn here?
- Installing Angular 2 CLI using NPM.
- Creating an Angular 2 application using command line interface
- Examine CLI created project structure.
- Serve or Run Angular 2 application.
- Create models and services to work with data.
- Create Dashboard page using router
Installing Angular 2 CLI using NPM
Ensure you have latest NPM and Node installed on your machine. After that run this command to install Angular 2 CLI globally. After installation just verify as shown in figure
1
|
npm
install
-
g
angular
-
cli
|
Creating an Angular 2 application using command line interface
We will be creating a simple “OurPlanets” application displaying list of our solar system planets
Run the below command in prompt to create new Angular 2 app. “OurPlanets” is application, the –prefix option tells us that “Planets” will be added as prefix for project files.
1
|
ng
new
OurPlanets
--
prefix
Planets
|
- CLI command – ng new to create application
- List of files created using CLI command
- The newly created application is now GIT repository by default.
- As the package.json is already created, CLI command restore the packages. It takes few minutes to restore packages.
Examine CLI created “OurPlanets” project structure in Visual Studio Code
Open Visual Studio code, load this project. We will check out project structure got created for us.
- “Config” folder containing configuration related environment, karma, protractor
- “e2e” folder containing test files, configurations for performing end to end testing.
- “node_modules” folder contains all packages restored as per package.json
- “public” folder is location to hold images, static assets
- “src” folder is the main application development folder containing template HTML files, TS files, components.
- “packages.json” essential file which contains reference to all packages needed for running Angular 2 app. See .gitignore file also. Automatically “OurPlanets” application is GIT repo, which we can push it if needed.
Isn’t it amazing just by running “ng new” command of Angular 2 CLI gives us so much stuff to get started.
Serve or run “OurPlanets” Angular 2 apps
Now that we have app with all dependencies, build it and run as shown in figure.
1
|
ng
build
|
1
|
ng
serve
|
Note: ng build command creates “dist/”, a folder containing compiled, minified (if applied) your Angular 2 application.
- ng serve command runs and listens on location, but doesn’t open any browser. If you wish you can use lite-server for it.
- “public” folder has semantic.min.css and themes folder which are moved to “dist” folder. Its not provided by Angular 2 CLI steps, I have added explicitly.
Create Planets model and PlanetService using CLI
As “OurPlanets” application is about solar system planets, it’s time to create model and service to get planets list and its details in form of planet.
Model refers to class structure containing properties just like C#, Java.
Run the following commands to create “planet.model” model class and “planet.service” service.
1
2
3
4
5
|
//create planet model
ng
generate
class
shared
/
planets
model
//create planet service
ng
generate
service
shared
/
planets
|
Note: class generating command lets have suffix with ‘model’, service generating command creates file with ‘service’ suffix.
CLI also generates spec TS files used for unit testing
Open planets.model.ts file & copy below code, its really simple class with four fields.
1
2
3
4
5
6
|
export
class
Planets
{
position
:
number
;
name
:
string
;
distanceFromSun
:
number
;
description
:
string
;
}
|
Open planets.service.ts file to copy below code; it imports ‘planets.model’, getPlanets method which returns list of planets data. Nothing fancy, but still good enough
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import
{
Injectable
}
from
'@angular/core'
;
import
{
Planets
}
from
'./planets.model'
;
@
Injectable
(
)
export
class
PlanetsService
{
constructor
(
)
{
}
getPlanets
(
)
:
Promise
<
Planets
[
]
>
{
return
Promise
.
resolve
(
PLANETSDATA
)
;
}
}
const
PLANETSDATA
:
Planets
[
]
=
[
{
position
:
1
,
name
:
'Mercury'
,
distanceFromSun
:
58
,
description
:
'88 earth days to orbit the sun'
}
,
{
position
:
2
,
name
:
'Venus'
,
distanceFromSun
:
108
,
description
:
'225 earth days to orbit the sun'
}
,
{
position
:
3
,
name
:
'Earth'
,
distanceFromSun
:
150
,
description
:
'365 earth days to orbit the sun'
}
,
{
position
:
4
,
name
:
'Mars'
,
distanceFromSun
:
228
,
description
:
'686 earth days to orbit the sun'
}
,
{
position
:
5
,
name
:
'Jupiter'
,
distanceFromSun
:
778
,
description
:
'12 earth years to orbit the sun'
}
,
{
position
:
6
,
name
:
'Saturn'
,
distanceFromSun
:
886
,
description
:
'29 earth years to orbit the sun'
}
,
{
position
:
7
,
name
:
'Uranus'
,
distanceFromSun
:
1800
,
description
:
'84 earth years to orbit the sun'
}
,
{
position
:
8
,
name
:
'Neptune'
,
distanceFromSun
:
2800
,
description
:
'165 earth years to orbit the sun'
}
]
;
|
Create Dashboard page using Router
Until now, we created Angular 2 app, added planets.model and planets.service. It’s time to create router. Run the following command to create and later see the magic !!
1
|
ng
generate
route
dashboard
|
The above shows only files created by ng generate route command, but CLI magic takes place in following files
- our-planets.component.html — router-outlet is added.
- system-config.ts — Dashboard is added to Angular 2 barrels (It helps to keep clean component code)
- our-planets.components.ts – Major magic happens here, Angular 2 CLI adds required router imports, adds directives, providers in @component, sets path in @Routes. Check out git difference of this file.
Now we are almost there, we have Angular 2 app setup with components, a sample service with model, a router to display planets. Lets add up all code required file by file.
our-planets.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import
{
Component
}
from
'@angular/core'
;
import
{
DashboardComponent
}
from
'./+dashboard'
;
import
{
Routes
,
ROUTER_DIRECTIVES
,
ROUTER_PROVIDERS
}
from
'@angular/router'
;
import
{
PlanetsService
}
from
'./shared'
;
@
Component
(
{
moduleId
:
module
.
id
,
selector
:
'our-planets-app'
,
templateUrl
:
'our-planets.component.html'
,
styleUrls
:
[
'our-planets.component.css'
]
,
directives
:
[
ROUTER_DIRECTIVES
]
,
providers
:
[
ROUTER_PROVIDERS
,
PlanetsService
]
}
)
@
Routes
(
[
{
path
:
'/dashboard'
,
component
:
DashboardComponent
}
]
)
export
class
OurPlanetsAppComponent
{
title
=
'Welcome to Solar System Planets !!'
;
}
|
our-planets.component.html
1
2
3
4
5
6
7
|
<
h3
class
=
"ui block header"
>
{
{
title
}
}
<
/
h3
>
<
nav
>
<
a
[
routerLink
]
=
"['dashboard']"
>
Dashboard
<
/
a
>
<
/
nav
>
<
router
-
outlet
>
<
/
router
-
outlet
>
|
dashboard.component.html – Displays UI on click on Dashboard link
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
br
>
<
div
class
=
"ui cards"
>
<
div
class
=
"card"
*
ngFor
=
"let planet of planetsList"
>
<
div
class
=
"content"
>
<
a
class
=
"header"
>
{
{
planet
.
name
}
}
<
/
a
>
<
div
class
=
"meta"
>
<
span
class
=
"date"
>
Position
{
{
planet
.
position
}
}
from
SUN
<
/
span
>
<
/
div
>
<
div
class
=
"description"
>
{
{
planet
.
description
}
}
<
/
div
>
<
/
div
>
<
/
div
>
<
/
div
>
|
dashboard.component.ts – imports Planets, PlanetsService to get list of planets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Router
}
from
'@angular/router'
;
import
{
Planets
,
PlanetsService
}
from
'../shared'
;
@
Component
(
{
moduleId
:
module
.
id
,
selector
:
'planets-dashboard'
,
templateUrl
:
'dashboard.component.html'
,
styleUrls
:
[
'dashboard.component.css'
]
}
)
export
class
DashboardComponent
implements
OnInit
{
planetsList
:
Planets
[
]
=
[
]
;
constructor
(
private
_planetservice
:
PlanetsService
,
private
_router
:
Router
)
{
}
ngOnInit
(
)
{
this
.
_planetservice
.
getPlanets
(
)
.
then
(
planets
=
>
this
.
planetsList
=
planets
)
;
}
}
|
We finished our sample Angular 2 app coding, now lets run ng build and ng serve to see it working. We can do live editing with CLI
There are many more Angular 2 CLI commands with interesting options, will explore them.
原文链接: http://www.mithunvp.com/build-angular-apps-using-angular-2-cli/