MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

slidenumbers: true

Angular Overview

Marc Kapke

kapkema@gmail.com


Angular Provides


Why Single Page apps (SPA)


Angular SPA architecture

inline


Angular Style guide


Angular - Core constructs


Modules


Decorators

  function magic(target) {
    target.isMagic = true;
  }

  @magic
  class MyClass() {}

  console.log(MyClass.isMagic); //true;

@NgModule


Module example

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Entry point

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(err => console.error(err));

Components


Components


Component example


export class ArticleListComponent implements OnInit {
  articles: Article[];
  selectedArticle: Article;

  constructor(private service: ArticleService) { }

  ngOnInit() {
    this.articles = this.service.getArticles();
  }

  selectArticle(article: Article) { this.selectedArticle = article; }
}


Templates


Template example

<h2>Article List</h2>
<p><i>Pick an article from the list</i></p>
<ul>
  <li *ngFor="let article of articles" (click)="selectArticle(article)">
    
  </li>
</ul>
<article-detail *ngIf="selectedArticle" [article]="selectedArticle"></article-detail>

Metadata


Metadata example

@Component({
  selector:    'article-list',
  templateUrl: './article-list.component.html',
  providers:  [ ArticleService ]
})
export class ArticleListComponent implements OnInit {
/* . . . */
}

Data binding


Interpolation


Property Binding


Event Binding


Two way Binding


Directives


Directives - structural

<li *ngFor="let article of articles"></li>
<article-detail *ngIf="selectedArticle"></article-detail>

Directives - attribute


Services


Services


Services - basic logger

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Services -

export class ArticleService {
  private articles: Article[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getArticles() {
    this.backend.getAll(Article).then( (articles: Article[]) => {
      this.logger.log(`Fetched ${articles.length} articles.`);
      this.articles.push(...articles); // fill cache
    });
    return this.articles;
  }
}

Dependency Injection


Injector


Providers


Example Providers

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger, ArticleService ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})