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](http://bloomlab.blogspot.com.ee/2017/03/keynote-quick-creation-of-nodejs-module.html) * [Angular recipe: Get State updates from Redux](https://bloomlab.blogspot.com.ee/2017/03/angular-recipe-get-state-updates-from.html) * [Angular CLI - Quickstart](https://angular.io/docs/ts/latest/cli-quickstart.html) * [Angular - styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html) * [Github - Angular CLI](https://github.com/angular/angular-cli)