Angular CLI

A command line interface for Angular 2

What does it do?

• Generator (Yeoman)
• Package manager - wraps npm
• Task runner (Gulp, Grunt)
  • Test (unit, e2e)
  • Lint
  • Format*

* Removed, see https://github.com/angular/angular-cli/issues/765

Installation

• Requires Node >=4.0

npm install -g angular-cli

Installed globally for access in any project

Usage

New project?

ng new <project>

Existing project?

ng init

ng new <project>

generates

.
├── angular-cli-build.js
├── angular-cli.json
├── config
│   ├── environment.dev.ts
│   ├── environment.js
│   ├── environment.prod.ts
│   ├── karma-test-shim.js
│   ├── karma.conf.js
│   └── protractor.conf.js
├── e2e
│   ├── app.e2e.ts
│   ├── app.po.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── node_modules/
├── package.json
├── public
├── src
│   ├── app/
│      ├── communities.component.css
│      ├── communities.component.html
│      ├── communities.component.spec.ts
│      ├── communities.component.ts
│      ├── environment.ts
│      ├── index.ts
│   └── shared/
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── system-config.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── tslint.json
├── typings/
│   ├── browser
│   ├── browser.d.ts
│   ├── main
│   └── main.d.ts
└── typings.json

ng serve
# or
ng server
# or 
ng s

Serve

ng generate
# or
ng g

ng test
# or
ng t

Generate new stuff

Run tests

communities-fe

ng new communities
ng g component branch-intro
ng g service branch-intro/branch-intro
ng g service branch-intro/branch-info
ng g class branch-intro/branch-info model
ng g class branch-intro/community-info model
ng g component mapbox

npm i -S mapbox-gl

// Register Mapbox as third-party lib
// https://github.com/angular/angular-cli/wiki/3rd-party-libs

// Save typings for mapbox
typings install github:smartrak/mapbox-gl-js-typescript/typings.json --save

ng g component shared/callout
ng g component header/floating-header
ng g component shared/section
ng g directive scroll-snap
ng g service shared/dna-http

/src/app

.
├── branch-intro
│   ├── branch-info.model.spec.ts
│   ├── branch-info.model.ts
│   ├── branch-info.service.spec.ts
│   ├── branch-info.service.ts
│   ├── branch-intro.component.html
│   ├── branch-intro.component.scss
│   ├── branch-intro.component.spec.ts
│   ├── branch-intro.component.ts
│   ├── branch-intro.service.spec.ts
│   ├── branch-intro.service.ts
│   ├── community-info.model.spec.ts
│   ├── community-info.model.ts
│   └── index.ts
├── communities.component.html
├── communities.component.scss
├── communities.component.spec.ts
├── communities.component.ts
├── environment.ts
├── header
│   └── floating-header
│       ├── floating-header.component.html
│       ├── floating-header.component.scss
│       ├── floating-header.component.spec.ts
│       ├── floating-header.component.ts
│       └── index.ts
├── index.ts
├── mapbox
│   ├── index.ts
│   ├── mapbox.component.html
│   ├── mapbox.component.scss
│   ├── mapbox.component.spec.ts
│   ├── mapbox.component.ts
│   └── mapbox.service.ts
└── shared
    ├── callout
    │   ├── callout.component.html
    │   ├── callout.component.scss
    │   ├── callout.component.spec.ts
    │   ├── callout.component.ts
    │   └── index.ts
    ├── dna-http.service.spec.ts
    ├── dna-http.service.ts
    ├── index.ts
    ├── scroll-snap.directive.spec.ts
    ├── scroll-snap.directive.ts
    ├── scroller.spec.ts
    ├── scroller.ts
    └── section
        ├── index.ts
        ├── section.component.html
        ├── section.component.scss
        ├── section.component.spec.ts
        └── section.component.ts

Demo

(*wip)