Keynote: Quick Creation of Angular2 App

This article is about fast setup & start working on your ng2 application.

The process feels quite similar to Node modules creation through npm CLI commands, but here we will use Angular Command Line Interface (Angular-CLI).

---

Angular modules creation with Angular CLI

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

Install the Angular CLI globally:

Bash

npm install -g @angular/cli

Create new Angluar application:

Bash

ng new my-ng2-app

Serve your Angluar application:

Bash

cd my-ng2-app
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

---

Newly Created project content

Markup

// end-to-end-tests
|- e2e/
|----- app.e2e.ts
|----- app.po.ts
|----- tsconfig.json

// npm dependencies
|- node_modules/

// sources where the most of the work will be done
|- 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
|----- icon.png
|----- index.html
|----- main.ts
|----- manifest.webapp
|----- system-config.ts
|----- tsconfig.json
|----- typings.d.ts

// overall configuration
|- angular-cli.json
|- .editorconfig
|- .gitignore
|- karma.con.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json

// check-style
|- tslint.json

---

Newly Created package.json

JSON

{
  "name": "my-ng2-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

---

Generating Components, Directives, Pipes and Services

You Generate new components, routes, services and pipes with ng generate or just ng g command:

• interface ng interface [name] <type>
  options: type optional type of interface.

• class ng g class [name]
  options: --spec specifies if a spec file is generated.

• enum ng g enum
  no options.

• component ng g component [name]
  options:

  • --flat flag to indicate if a dir is created.
  • --inline-template (-it) specifies if the template will be in the ts file.
  • --inline-style (-is) specifies if the style will be in the ts file
  • --prefix specifies whether to use the prefix
  • --spec specifies if a spec file is generated
  • --view-encapsulation (-ve) specifies the view encapsulation strategy
  • --change-detection (-cd) specifies the change detection strategy
  • --skip-import allows for skipping the module import
  • --module (-m) allows specification of the declaring module
  • --export specifies if declaring module exports the component

• directive ng g directive [name]
  options:

  • --flat flag to indicate if a dir is created
  • --prefix specifies whether to use the prefix
  • --spec specifies if a spec file is generated
  • --skip-import allows for skipping the module import
  • --module (-m) allows specification of the declaring module
  • --export specifies if declaring module exports the directive

• module ng g module [name]
  options:

  • --flat flag to indicate if a dir is created
  • --spec specifies if a spec file is generated
  • --routing specifies if a routing module file should be generated

• pipe ng g pipe [name]
  options:

  • --flat flag to indicate if a dir is created
  • --spec specifies if a spec file is generated
  • --skip-import allows for skipping the module import
  • --module (-m) allows specification of the declaring module
  • --export specifies if declaring module exports the pipe

• service ng g service [name]
  options:

  • --flat flag to indicate if a dir is created
  • --spec specifies if a spec file is generated
  • --module (-m) allows specification of the declaring module

• quard ng generate guard [name]
  options:

  • --flat flag to indicate if a dir is created
  • --spec specifies if a spec file is generated
  • --module (-m) allows specification of the declaring module

The CLI will also create simple test shells for all of these.

---

Conclusions

Angular CLI is a great tool to Setup/Create & Serve your application, which helps speed up development.
It follows angular style guide and best-practices which makes it even more shiny.

---

see Also

• Keynote: Quick Creation of Node.js Module
• Angular recipe: Get State updates from Redux
• Angular CLI - Quickstart
• Angular - styleguide
• Github - Angular CLI