Angular 6 CLI

up to speed in 60 minutes













- joriszwart.nl






joriszwart.nl

I CODE DREAMS

Agenda

  1. What is Angular?
  2. Prerequisites
  3. Create an application
  4. Serve and hot reload
  5. Add a component
  6. Model binding (one way, two way)
  7. Services
  8. Angular philosophy
  9. Material design and material components (CDK)
  10. Folder structure
  11. Demo time!
  12. DIY tour of heroes

What is Angular?


Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.

Angular empowers developers to build applications that live on the web, mobile, or the desktop

Tools prerequisites

I recommend using Visual Studio Code with Angular CLI.

1. Install tools

  • Node.js >= 6.9.0
  • NPM >= 3 (comes with Node.js)

2. Install angular-cli

Open up a terminal and execute this command and wait...

$ npm install --global @angular/cli

Create a new application

Your new application is only one ng command away!


In a terminal:

$ ng new my-application             # wait again...
$ cd my-application
$ ng serve


Surf to localhost:4200 and shiver!

Serve and hot reload


Modify app.component.ts or app.component.html to see hot reloading in action.


Use Control + C to interrupt the web server, go on with your life and start creating a component...

1. Create a component

In a terminal:

$ ng generate component page


This will result in a set of files which make up your component.

  • page.component.html - template
  • page.component.ts - component class
  • page.component.css - styling (scoped!)
  • page.component.spec.ts - unit test

2. Use the newly created component

First run ng serve again to take advantage of hot reloading.


Open up app.component.html and replace the content with this code:

<app-page></app-page>


This should result in your browser displaying:

Page works!

Trouble shooting

If the previous rendered void:

  1. Have a look at the output of ng serve in the terminal.
  2. Open up the developers console of your browser and look at the console log.

Note about hot reloading

After creating a component (or generating a service), run ng serve again and reload the application in your browser.

Model binding

Add a property to your component:

// page.component.ts
class {
  public message: string = 'Hello, world!'
  // ...
}

<!-- page.component.html -->
{{ message }}

You can apply this concept to HTML attributes, classes and styles as well!

Model binding - Two way(s)

Use NgModel.

<input [(ngModel)]="name">
<button (click)="submitForm()">Submit</button>

See also Tour of Heroes.

Services

Where components are for view logic, services come into place for other logic. Reusable and the such.

$ ng generate service my-service

Inject the service in the constructor using dependency injection:

constructor(private myService: MyService) {}

The service is now available as this.myService and methods can be called on it.

Standard services

constructor(private http: HttpClient) {}

Angular philosophy

  • Many very small components
  • Services for logic
  • Modules

Read more in the Angular Style Guide.

Minimal Angular Material application with gesture support

TODO what is Material (design)?

Add Material Design

$ npm install --save @angular/material @angular/cdk

Optional packages if you like!

$ npm install --save @angular/animations
$ npm install --save @angular/flex-layout
$ ng generate module material     # for import convenience

Touch gesture support

Add touch gesture support with hammerjs

$ npm install --save hammerjs

Add import to main.ts 

import 'hammerjs'

Material Design Components

Use .mat-typography for global typography.

// page.component.ts
import { MatButton } from '@angular/material'; 

...
<!-- page.component.html -->

<mat-button></mat-button>

Production build

To create a production build that is minified, tree shaken and combined by Webpack:

$ npm build --prod

The created bundle contains a set of files that can be served by a (static) webserver. Note the cache-busting and the sizes.

Filename
index.html
main.4241826d33942486d560.js
polyfills.2f4a59095805af02bd79.js
runtime.a66f828dca56eeb90e02.js
styles.801710192fa9f58b78b4.css

Folder structure

  • [dist] – release bundle
  • [e2e] – end-to-end tests (protractor)
  • [src]
    • [app]
      • app.component.* – application component
      • [models] – view models
      • [page] – page component
      • [services]
    • [assets] – static files (images, data)
    • [environments] – build environment configurations (production, development)
    • index.html – HTML entry point
    • main.ts – entry point
    • style.css – global styles
    • ...
  • angular.json – Angular-CLI configuration file
  • package.json – NPM configuration file
  • ...









Demo time!

Do It Yourself

Tour of Heroes: angular.io/tutorial

Where to go next?

Read up










C'est tout! Des questions?