Angular 5 Boilerplate

demo of most common usage of angular with unit tests such as component, service, directive, pipe, router, form

Table of Contents

• About
  • Frontend Stack used in this Boilerplate
  • Boilerplate Demo covered Usage/Test
• Setup
  • Codebase
  • VisualStudio Code Editor
• CLI Command
• Folder Structure

---

About

Frontend Stack used in this Boilerplate

• SCSS (CSS) with sourcemap
• JADE (HTML)
• CLI 1.6.6 (Initial Project is generated by CLI)
• Angular 5.2.0 (from CLI)
• TypeScript 2.5.3
• Npm 6.14.4 | Node 11.4.0 (Tested with Node 9.8 which unfortunately node-sass does not work with)

Further Comments

• Though there is major version change between 5 and current Angular version, the actual implementation doesn't vary much apart from the API namespace itself
• Current TraviCI config contains only angular test in the CI pipeline

Boilerplate Demo covered Usage/Test

• Component

  • binding
  • event & event handler
  • @HostBinding, @HostListener
  • Input (passing data to component), Output (custom event emitter)
  • ngOnInit with data-call service
  • Access Component's own Dom via ElementRef.nativeElement
  • Access child component or directive in own template via @ViewChild/@ViewChildren
  • Access passed component or directive via @ContentChild/@ContentChildren (testing <ng-content>)

• Directive

  • custom validator (for template-driven form)
  • attribute directive - fixed behavior (events, attribute: style/attr/css class)
  • structural directive
  • directive which is exported via exportas

• Service

  • async data fetching (both promsie and observable based scenarios)

• Pipe

  • simple transform uppercase to lowercase

• Router

  • 4 route types (normal, wildcard, specific, specific guard with data-call service)
  • navigating path (both via HTML or JS)
  • route guard which resolves depending on data fetching
  • accessing resolve data (both query param and path param)
  • lazy route loading (not covered)

• Form

  • 2 approaches (both template-driven & reactive form)
  • validation (both built-in & cusstom)
  • model (both template-driven & reactive form)

Setup

Codebase (Mac based)

1. Install Node 6.9.0 or higher
2. Install Homebrew
3. Install Watchman in Terminal (for monitoring file changes):

   brew install watchman
   

4. Install Typescript & CLI in Terminal:

   npm install -g @angular/cli typescript
   

5. Under Project Root, Install the dependencies in Terminal:

   npm install
   

6. Run the patch for the CLI:

   npm run patch-cli
   

   so that:
   • the Scss has sourcemap
   • the generated project files are formatted in 4 spaces instead of 2 spaces
   • Write Jade/Pug instead of Html
   • More comprehensive code/comments for the Component Test/Spec file

VisualStudio Code Editor

• Go to Menu: Preference > Settings, in your user settings, make sure the settings has the following set:

{
    ...
    "tslint.rulesDirectory": "./node_modules/codelyzer",
    "typescript.tsdk": "node_modules/typescript/lib",
    "files.trimTrailingWhitespace": true,
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    }    
}

CLI Command

• Development server (http://localhost:4200/):

  ng serve
  

  or with sourcemap

  ng serve -sm -ec
  

• Build:

  ng build --prod
  

• Unit test (Karma):

  ng test
  

• End-2-End Test (Protractor):

  ng e2e
  

• Generating NG Entity, e.g.

  ng generate <entity-type> <path-name>/<entity-name>
  

  • path name is relative to "src/app" folder
  • entity type can be one of the following:
    directive|pipe|service|class|guard|interface|enum|module
• Generate Documentation:

  npm run doc
  

• Generate Directory Tree (required to be copied from terminal upon generation & added to README):

  npm run dir-tree
  

Folder Structure (critical files only)

patch/
    ng-cli/                 // patch files to allow pug/jade and sass to work

src/
    test-util/              // dummy components, directives that can be overidden/used in testing
    scss/                   // scss files
    app/
        directive/
        pipe/
        service/
        ui-component/       // generic component only, not to be conflict with form/router
        ui-form/            // form related
            cmp/            // form components
            model/          // model created using `FormGroup` or Service
            validator/
        ui-router/          // router related
            config/
            guard/          // guard (if any)
            lazy-module/    // module containing view component to be lazy load (if any)
            view/           // view component