Project structure
1. Create a feature module, and the components and services it contains.
of g module art of g component art / music of g component art / dance of g service art /performance
Two feature modules
art.module.ts
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MusicComponent } from './music/music.component'; import { DanceComponent } from './dance/dance.component'; import { PerformanceService } from './performance.service'; @NgModule ({ imports: [ CommonModule ], // Associate feature modules with components: add declarable objects (components, directives, and pipes) specific to this module declarations: [MusicComponent, DanceComponent], // Export components: After importing a feature module, you can use the The component template exports: [ MusicComponent, DanceComponent ], providers: [ PerformanceService ] }) export class ArtModule { }
three components
music.component.ts
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-music', templateUrl: './music.component.html', styleUrls: ['./music.component.css'] }) export class MusicComponent implements OnInit { @Input() name: string; constructor() { } by OnInit () { } }
music.component.html
<p> music works!{{name}} </p>
dance.component.ts
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-dance', templateUrl: './dance.component.html', styleUrls: ['./dance.component.css'] }) export class DanceComponent implements OnInit { @Input() name: string; constructor() { } by OnInit () { } }
dance.component.html
<p> dance works!{{name}} </p>
Four services
performance.service.ts
import { Injectable } from '@angular/core'; @Injectable() export class PerformanceService { constructor() { } perform(): string[] { return [ 'singing' , 'dancing' ]; } }
Five import feature modules
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ArtModule } from './art/art.module'; @NgModule ({ declarations: [ AppComponent ], imports: [ BrowserModule, ArtModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Six components and services using feature modules
app.component.ts
import { Component } from '@angular/core'; import { PerformanceService } from './art/performance.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(public performance: PerformanceService) { } perform() { console.log(this.performance.perform()); } }
app.component.html
<p> app works! </ p > <!-- Both one-way bindings work --> < app-music [name] ="'Adelina by the Water'" ></ app-music > < app-dance name = "Tap Dance" ></ app-dance > < button type = "button" (click) = "perform();" > show </ button >
Seven running effects