angular 6 from rookie to master

1. Updating the Root Component

The root component is the Angular building block that will manage the contents of the app element in the
HTML document.

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `<div class="bg-success p-2 text-center text-white">
              Welcome to BookLibrary
            </div>`
})
export class AppComponent {
}

2. 2 types of modules

There are two types of Angular modules: feature modules and the root module.

Features modules are used to group related application functionality to make the application easier to manage.
(eg: data model, library interface)

The root module is used to describe the application to Angular.
The description includes

• which feature modules are required to run the application
• which custom features should be loaded
• name of the root component
  (The conventional name of the root component file is app.module.ts)

3. Starting the Data Model

The best place to start any new project is the data model. I

• 3-1) Creating the Model Classes

export class Book {
  constructor(
    public id?: number,
    public name?: string,
    public category?: string,
    public owner?: string,
    public type?: string,
    public location?: string,
    public team?: string
  ) { }
}

• 3-2) Creating the Dummy Data Source

static.datasource.ts

import { Injectable } from "@angular/core";
import { Book } from "./book.model";
import { Observable, from } from "rxjs";

@Injectable()
export class StaticDatasource {
  private books: Book[] = [
    new Book(1, "Java 8实战", "JAVA", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(2, "Spring微服务实战", "MicroService", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(3, "Akka实战：快速构建高可用分布式应用", "BigData", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(4, "Docker实战", "DevOps", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(5, "Java虚拟机规范", "JAVA", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(6, "MySQL技术内幕：InnoDB存储引擎（第2版）", "Database", "ADC", "PAPER BOOK", "8F", "Digital"),
    new Book(7, "PHP7内核剖析", "PHP", "ADC", "PAPER BOOK", "8F", "Digital"),
    new Book(8, "响应式架构：消息模式Actor实现与Scala、Akka应用集成", "BigData", "ADC", "PAPER BOOK", "8F", "EDG"),
    new Book(9, "码出高效：Java开发手册", "JAVA", "KG", "PAPER BOOK", "", ""),
    new Book(10, "Spring Cloud与Docker微服务架构实战", "MicroService", "KG", "PAPER BOOK", "", "" )
  ];

  getBooks(): Observable<Book[]> {
    return from([this.books]);
  }
}

The Observable class is provided by the Reactive Extensions package, which is used by Angular to
handle state changes in applications.

Observable object represents an asynchronous task that will produce a result at some point in the future

The @Injectable decorator is used to tell Angular that this class will be used as a service, which allows other classes to access its functionality through a feature called dependency injection

4. Creating the Model Repository

book.repository.ts

import { Injectable } from "@angular/core";
import { Book } from "./book.model";
import { StaticDataSource } from "./static.datasource";

@Injectable()
export class BookRepository {
  private books: Book[] = [];
  private owners: string[] = [];

  constructor(private dataSource: StaticDataSource) {
    dataSource.getBooks().subscribe(data => {
      this.books = data;
      this.owners = data.map(p => p.owner).filter((c, index, array) => array.indexOf(c) === index).sort();
    });
  }

  getBooks(owner: string = null): Book[] {
    return this.books.filter(p => owner == null || p.owner === owner);
  }

  getBook(id: number): Book {
    return this.books.find(p => p.id === id);
  }

  getOwners(): string[] {
    return this.owners;
  }
}

5. Creating the Feature Module

The feature mode will allow the data model functionality to be easily used elsewhere in the application

model.module.ts

import { NgModule } from "@angular/core";
import { BookRepository } from "./book.repository";
import { StaticDataSource } from "./static.datasource;
@NgModule({
  providers: [BookRepository, StaticDataSource]
})
export class ModelModule { }

6. Creating the Library Component and Template

• component logic

library.component.ts

import { Component } from "@angular/core";
import { Book } from "../model/book.model";
import { BookRepository } from "../model/book.repository";

@Component({
  selector: "library",
  templateUrl: "library.component.html"
})
export class LibraryComponent {
  constructor(private repository: BookRepository) { }
  get books(): Book[] {
    return this.repository.getBooks();
  }
  get owners(): string[] {
    return this.repository.getOwners();
  }
}

• component template

library.component.html

<div class="container-fluid">
  <div class="row">
    <div class="col bg-dark text-white">
      <a class="navbar-brand">BOOK LIBRARY</a>
    </div>
  </div>
  <div class="row text-white">
    <div class="col-3 bg-info p-2">
      {{owners.length}} Owners
    </div>
    <div class="col-9 bg-success p-2">
      {{books.length}} Books
    </div>
  </div>
</div>

7. Creating the Library Feature Module

library.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { ModelModule } from "../model/model.module";
import { LibraryComponent } from "./library.component";
@NgModule({
  imports: [ModelModule, BrowserModule, FormsModule],
  declarations: [LibraryComponent],
  exports: [LibraryComponent]
})
export class LibraryModule { }

8. Update root component’s template

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `<library></library>`
})
export class AppComponent {
}

9. Updating the application’s root feature module to import the other feature modules

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {LibraryModule} from './library/library.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LibraryModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

run the program and show below result

image.png