[Thực hành] Ứng dụng nghe nhạc- Codegym.vn

Mục tiêu

Ứng dụng nghe nhạc- nắm bắt được về các thao tác với service và router trong Angular.

Mô tả- ứng dụng nghe nhạc

Tạo ứng dụng nghe nhạc

Hướng dẫn

Bước 1: Khởi tạo project với Angular CLI (nếu đã có project thì có thể bỏ qua)

Các bạn chạy lệnh npm i typescript@2.9.2 -D để cài đặt thư viện typescript nếu phiên bản hiện tại < 2.9.2

Bước 2: Khởi tạo hai component mới trong project và đặt tên là youtube-playlist, youtube-player

Khởi tạo một service mới tên là youtube.

Tạo file app-routing.module.ts (bỏ qua nếu dùng project mẫu)

Bước 3: update file routing vừa tạo:

const routes: Routes = [
    {
        path: 'youtube',
        component: YoutubePlaylistComponent,
        children: [{
            path: ':id',
            component: YoutubePlayerComponent
        }]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {
        preloadingStrategy: PreloadAllModules
    })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

Bước 4: update file app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        YoutubePlaylistComponent,
        YoutubePlayerComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Bước 5: update code của service vừa tạo

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

@Injectable({
    providedIn: 'root'
})
export class YoutubeService {
    playlist = [
        {id: 'CX11yw6YL1w', song: 'Céline Dion - Ashes (from the Deadpool 2 Motion Picture Soundtrack)'},
        {id: 'HBYirj2c_jw', song: 'Deadpool 2 - Take on Me'},
        {id: 'N6O2ncUKvlg', song: 'Nelly - Just A Dream'},
        {id: 'uelHwf8o7_U', song: 'Eminem - Love The Way You Lie ft. Rihanna'},
        {id: 'WpYeekQkAdc', song: 'The Black Eyed Peas - Where Is The Love?'}
    ];
    constructor() { }
    find(id: string) {
        return this.playlist.find(item => item.id === id);
    }
}

Bước 6: update code cho youtube playlist

Template:

<h2>Youtube playlist</h2>
<ul>
    <li *ngFor="let item of youtubeService.playlist">
        <a [routerLink]="['/youtube', item.id]">{{item.song}}</a>
    </li>
</ul>

<router-outlet></router-outlet>

Component:

import { Component, OnInit } from '@angular/core';
import { YoutubeService } from '../youtube.service';

@Component({
    selector: 'app-youtube-playlist',
    templateUrl: './youtube-playlist.component.html',
    styleUrls: ['./youtube-playlist.component.scss']
})
export class YoutubePlaylistComponent implements OnInit {

    constructor(public youtubeService: YoutubeService) { }

    ngOnInit() {
    }
}

Bước 7: update code cho youtube player

Template:

<div *ngIf="song; else tmpl">
    <h2>Song name: {{song.song}}</h2>
    <iframe width="560" height="315" [src]="getSrc()" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<ng-template #tmpl>
    <h2>Nothing to play</h2>
</ng-template>

Component:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { YoutubeService } from '../youtube.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'app-youtube-player',
    templateUrl: './youtube-player.component.html',
    styleUrls: ['./youtube-player.component.scss']
})
export class YoutubePlayerComponent implements OnInit, OnDestroy {
    song: any;
    sub: Subscription;
    constructor(
        private youtubeService: YoutubeService,
    private activatedRouter: ActivatedRoute,
    private domSanitizer: DomSanitizer
) { }

ngOnInit() {
    this.sub = this.activatedRouter.paramMap.subscribe((paramMap: ParamMap) => {
        const id = paramMap.get('id');
        this.song = this.youtubeService.find(id);
    });
}

getSrc() {
    const url = 'https://www.youtube.com/embed/' + this.song.id;
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
}

ngOnDestroy() {
    this.sub.unsubscribe();
}

}

Bước 8: update code cho app.component.html

<nav>
    <a routerLink="youtube" class="link">Youtube</a>
</nav>
<router-outlet></router-outlet>

Bước 9: kiểm tra kết quả

Mã nguồn tham khảo: https://github.com/codegym-vn/angular-training/tree/master/angular-service-router/src/app

Trên đây CodeGym đã cùng với bạn luyện tập về các thao tác với service và router trong Angular. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!