◀ prev
▶ next

Angular

Up to speed in 15 or 60 minutes

Joris Zwart logo

I CODE DREAMS™

  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
  1. Angular philosophy
  2. Material design and material components (CDK)
  3. Folder structure
  4. Demo time!
  5. DIY tour of heroes
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 or WebStorm with Angular CLI.

1. Install tools
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.

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

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.

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

Folder structure


Demo time!

Do It Yourself

Tour of Heroes: angular.io/tutorial

Where to go next?

Read up

C'est tout! Des questions?