4.1.1. Thư mục app
Phần chứa các component tương ứng với các chức năng tương ứng của phần mềm.
4.1.1.1. AppComponent
Đây là component chính của phần mềm Code:
- app.component.ts
``ts import { Component } from '@angular/core'; import { initializeApp, database } from 'firebase'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { Question } from './question'; @Component({ selector: 'app-root', template:</app-menu> </router-outlet> </app-footer> `, }) export class AppComponent { title = 'Đề thi Vật Lý'; }
##### 4.1.1.2. HomeComponent
Là phần hiển thị ở phần thân của trang chủ.
#####4.1.1.3. MenuComponent
Là phần hiển thị ở phần menu của phần mềm
Code:
* **menu.component.html**
```html
<div class="container">
<header id="header" class="header container">
<div class="navbar navbar-fixed-top navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../assets/images/home.jpg" width="50" height="50" />
<a href="" color="white">{{title}}</a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse" color = "white">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" *ngIf = "shows">
<a href="" class="dropdown-toggle" data-toggle="dropdown" >Đăng nhập<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><button (click)="loginGoogle()">Đăng nhập với Google</button></li>
<li><button (click)="loginFb()">Đăng nhập với Facebook</button></li>
</ul>
</li>
<li class="active" *ngIf="show">
<a><b>{{name.auth.displayName}}</b></a>
</li>
<li *ngIf="show">
<a><button (click)="logout()"><b>Đăng xuất</b></button></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a routerLink="/home" routerLinkActive="active"><img src="../assets/images/home-icon.png" width="50" height="50" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="active"><a routerLink="/home" routerLinkActive="active">Trang chủ</a></li>
<li><a routerLink="/tailieu" routerLinkActive="active">Tài liệu</a></li>
<li><a routerLink="/dethi" routerLinkActive="active">Đề thi</a></li>
<li><a routerLink="/dethitest" routerLinkActive="active">Luyện thi</a></li>
<li><a routerLink="/diendan" routerLinkActive="active">Diễn đàn</a></li>
<li><a routerLink="/gioithieu" routerLinkActive="active">Giới thiệu</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header><!-- /header -->
</div>
menu.component.ts
import { Component, OnInit } from '@angular/core'; import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2'; import { Router } from '@angular/router'; import { FirebaseService } from '../services/firebase.service'; import { Dethi } from '../dethi'; import { Question } from '../question'; @Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.css'], providers: [FirebaseService] }) export class MenuComponent implements OnInit { title = "Ôn Luyện Vật Lý"; error: any; show = false; shows = true; name: any; private use_displayName: String; private user_email: String; constructor(public firebaseService: FirebaseService, public af: AngularFire,private router: Router) { this.af.auth.subscribe(auth => { if(auth) { this.name = auth; } }); } ngOnInit() { } loginFb() { this.af.auth.login({ provider: AuthProviders.Facebook, method: AuthMethods.Popup, }).then( (success) => { this.shows = false; this.show = true; }).catch( (err) => { this.error = err; }) } loginGoogle() { this.af.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Popup, }).then( (success) => { this.shows = false; this.show = true; }).catch( (err) => { this.error = err; }) } logout() { this.af.auth.logout().then( (success) => { this.shows = true; this.show = false; } ); } }4.1.1.4 DethiComponent
Là phần hiển thị danh sách đề thi được xem
dethi.component.html
Hiển thị:
Code: <content> <div class="container"> <h3 class="text-center"><b>Đề thi thử Đại học môn Vật Lý</b></h3> <hr> <div class="row"> <div class="col-md-3" *ngFor="let xemdethi of dethi"> <a [routerLink]="['/xemdethi/'+ xemdethi.$key]"> <img src="" alt="" width="100%" height="200"> <p class="text-center"></p> </a> <hr> </div> </div> </div> </content>4.1.1.5. XemdethiComponent
Đây là phần xem đề thi trực tuyến và cho phép tải đề thi Hiển thị:
Code:- xemdethi.component.html
<content > <div class="container" > <div class="row"> <div class="col-md-12"> <h2 class="text-center"><b></b></h2> <ul class="list-group"> <li class="list-group-item text-center"><h4><b>Đề bài</b></h4></li> <div *ngFor="let a of quest"> <li class="list-group-item" *ngIf = "a.title == deth.title"> <div class="well well-lg" > <h4><span class=""><label></label></span></h4> <hr> <span><label><h4>Chọn câu trả lời đúng:</h4></label></span> <ul> <h5> <li class="radio" *ngFor = "let luachon of a.luachon" > <label><b>+) </b> </label> </li> </h5> </ul> </div> </li> </div> </ul> <a href="" target="_blank"> <button class="btn btn-success col-xs-3 well-sm col-md-offset-4">Tải đề thi</button> </a> </div> </div> </div> </content> xemdethi.component.ts
import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; import { FirebaseService } from '../services/firebase.service'; @Component({ selector: 'app-xemdethi', templateUrl: './xemdethi.component.html' }) export class XemdethiComponent implements OnInit { id: any; deth: any; quest: any; constructor( private firebaseService: FirebaseService, private router: Router, private route: ActivatedRoute, ) { } ngOnInit() { this.id = this.route.snapshot.params['id']; this.firebaseService.getDethiDetails(this.id).subscribe(deth => { this.deth = deth; }); this.firebaseService.getQuestions().subscribe(quest => { this.quest = quest; }); } }4.1.1.6 DethitestComponent
Hiển thị danh sách các đề thi phục vụ cho thi trực tuyến Hiển thị:
Code: - dethitest.component.html
<content> <div class="container"> <h3 class="text-center"><b>Thi thử Đại học môn Vật Lý</b></h3> <hr> <div class="row"> <div class="col-md-3" *ngFor="let lambai of dethi"> <a [routerLink]="['/lambai/'+ lambai.$key]"> <img src="" alt="" width="100%" height="200"> <p></p> </a> </div> </div> </div> </content> dethitest.component.ts
import { Component, OnInit } from '@angular/core'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { FirebaseService } from '../services/firebase.service'; @Component({ selector: 'app-dethitest', templateUrl: './dethitest.component.html', styleUrls: ['/dethitest.component.css'] }) export class DethitestComponent implements OnInit { dethi: any; constructor( private af: AngularFire, private firebaseService: FirebaseService, ) { } ngOnInit() { this.firebaseService.getDethi().subscribe(dethi => { console.log(dethi); this.dethi = dethi; }); } }4.1.1.7. LambaiComponent
Đây là phần thi trực tuyến Hiển thị:
Hình 4.1.1.7a- Xác nhận làm bài thi
Hình 4.1.1.7b- Làm bài thi
Hình 4.1.1.7c- Xem kết quả bài thiSau khi làm bài xong, người dùng có thể trực tiếp xem đáp án của đề thi
Hình 4.1.1.7d- Xem đáp án của đề thiCode:
- lambai.component.html
<div class="container" *ngIf = "xacnhan"> <content> <div class="container"> <h3 class="text-center">Bắt đầu làm bài</h3> <div class="table"> <table class="table table-bordered"> <thead> <tr> <th colspan="3"><h5 class="text-center text-success"><span>Xác Nhận Làm Bài Thi</span></h5></th> </tr> </thead> <tbody> <tr> <td></td> <td>Thời gian: 60 phút</td> </tr> </tbody> </table> </div> <button name="bat_dau" class="btn btn-success col-xs-3 well-sm col-md-offset-4" value="Bắt đầu làm bài" (click) = "xacnhan!=xacnhan; lambai!=lambai; getClick2(); start()">Bắt đầu</button> </div> </content> </div> <content *ngIf = "lambai"> <div class="container" *ngIf="show"> <div class="row"> <div class="col-md-10"> <h2></h2> <ul class="list-group"> <li class="list-group-item">Đề bài</li> <div *ngFor="let question of quest"> <li class="list-group-item" *ngIf = "question.title == deth.title"> <div class="well well-lg" > <h4><span class=""><label></label></span></h4> <hr> <span><label><h4>Chọn câu trả lời đúng:</h4></label></span> <div class="radio" *ngFor = "let luachon of question.luachon" > <label><input #b type="radio" value = "" name = "" (click) = "check(deth.title, b.value)"></label> </div> </div> </li> </div> </ul> </div> <div class="col-md-2 "> <div class="affix clock text-center"> <label><h3>Thời gian làm bài</h3></label> <p> <label class="text-center"> <h4> <span id="h"></span> : <span id="m"></span> : <span id="s"></span> </h4> </label> </p> </div> </div> </div> <button *ngIf="show" name="end" class="btn btn-success col-xs-3 well-sm col-md-offset-4" value="Kết thúc làm bài" (click)="showHeroes!=showHeroes; showHeroe != showHeroe; getClick1()">Nộp bài</button> </div> <div class="container" *ngIf="shows" > <content> <div class="container"> <h3 class="text-center"> Kết quả bài thi</h3> <div class="table"> <table class="table table-bordered"> <thead> <tr> <th colspan="" rowspan="" headers="" scope=""><p class="text-center">Điểm</p></th> <th colspan="" rowspan="" headers="" scope=""><p class="text-center">Xem đáp án và lời giải</p></th> </tr> </thead> <tbody> <tr> <td> <h1 class="text-center">NaN</h1> <h4 class="text-center">Số đáp án đúng: /40</h4> </td> <td> <h4 class="text-center">Nếu chưa hài lòng với kết quả, Bạn nên cố gắng tự kiểm tra lại bài làm trước khi xem đáp án hoặc lời giải!</h4> <button type="button" class="btn btn-primary col-md-4" (click) = "getClick3()">Xem đáp án</button> <button type="button" class="btn btn-primary col-md-4" (click) = "gotoDethitest()">Làm lại bài thi</button> </td> </tr> </tbody> </table> </div> <button type="button" class="btn btn-success col-xs-3 well-sm col-md-offset-4"(click) = "gotoDethitest()">Kết thúc</button> </div> </content> </div> </content> <div class="container" *ngIf="da"> <div class="row"> <div class="col-md-10"> <h2></h2> <ul class="list-group"> <li class="list-group-item">Đề bài</li> <div *ngFor="let a of quest"> <li class="list-group-item" *ngIf = "a.title == deth.title"> <div class="well well-lg" > <h4><span class=""><label></label></span></h4> <hr> <span><label><h4>Chọn câu trả lời đúng:</h4></label></span> <div class="radio" *ngFor = "let luachon of a.luachon" > <label><input #b type="radio" value = "" name = ""></label> </div> <label>Đáp án: </label> </div> </li> </div> </ul> </div> </div> </div> lambai.component.ts
import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute, Params, Router } from '@angular/router'; import { Location } from '@angular/common'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { FirebaseService } from '../services/firebase.service'; @Component ({ selector: 'my-lambai', templateUrl: './lambai.component.html', styleUrls: ['./lambai.component.css'] }) export class LambaiComponent implements OnInit { id: any; deth: any; quest: any; private score: number; private scores: number; private count: number; da = false; private shows = false; private show = true; xacnhan = true; lambai = false; public timer: any; public h: number; public m: number; public s: number; constructor( private location: Location, private route: ActivatedRoute, private router: Router, private af: AngularFire, private firebaseService: FirebaseService, ) { } getClick1() { this.show = false; this.shows = true; } getClick2() { this.xacnhan = false; this.lambai = true; } getClick3() { this.da = true; this.shows = false; } ngOnInit(): void { this.score = 0; this.count = 0; this.scores = 0; this.id = this.route.snapshot.params['id']; this.firebaseService.getDethiDetails(this.id).subscribe(deth => { this.deth = deth; }); this.firebaseService.getQuestions().subscribe(quest => { this.quest = quest; }); } check(title: string, a: string) { let c = []; for (let i = 0; i < this.quest.length; i ++){ c[i] = 0; if((this.quest[i].title == title) && (a == this.quest[i].answer)){ c[i] =1; this.score+= c[i]; } } } gotoDethitest() { let link = ['/dethitest']; this.router.navigate(link); } gotoDethi() { let link = ['/dethi']; this.router.navigate(link) } start() { this.h = 1; this.m = 0; this.s = 0; window.clearInterval(this.timer); this.timer = setInterval(() => { this.s--; if (this.s === -1){ this.m -= 1; this.s = 59; } if (this.m === -1){ this.h -= 1; this.m = 59; } if(this.h === -1) { window.clearInterval(this.timer); this.startFilling(); this.getClick1(); } }, 1000); } startFilling() { console.log(true); } }4.1.1.8. GioithieuComponent
Đây là phần giới thiệu đôi chút về phần mềm
4.1.1.9. DiendanComponent
Phần liên kết đến fanpage trên Facebook: Ôn luyện Vật Lý
4.1.1.10. services
Phần liên kết đến cơ sở dữ liệu Code:
firebase.service.ts
import { Injectable } from '@angular/core'; import { AngularFire, FirebaseListObservable, FirebaseObjectObservable, AuthProviders, AuthMethods } from 'angularfire2'; import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import { Dethi } from '../dethi'; import { Question } from '../question'; import { Tailieu } from '../tailieu'; @Injectable() export class FirebaseService { dethi: FirebaseListObservable<any[]>; deth: FirebaseObjectObservable<any[]>; questions: FirebaseListObservable<any[]>; tailieu: FirebaseListObservable<any[]>; constructor(public af: AngularFire, private http: Http) { this.dethi = this.af.database.list('dethi') as FirebaseListObservable<Dethi[]>; this.questions = this.af.database.list('questions') as FirebaseListObservable<Question[]>; this.tailieu = this.af.database.list('tailieu') as FirebaseListObservable<Tailieu[]>; } search(term: string): Observable<Dethi[]> { return this.http .get(`xemdethi/?$key=${term}`) .map(response => response.json().data as Dethi[]); } loginWithGoogle() { return this.af.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Popup }); } logout() { return this.af.auth.logout(); } getDethi() { return this.dethi; } getDethiDetails(id) { this.deth = this.af.database.object('/dethi/' + id) as FirebaseObjectObservable<Dethi> return this.deth; } getQuestions() { return this.questions; } getTailieu() { return this.tailieu; } }4.1.1.10. TailieuComponent
Phần hiển thị danh sách tài liệu của phần mềm
Hiển thị:
Code:
- tailieu.component.html
<content> <div class="container"> <h3 class="text-center"><b>Tài liệu ôn thi môn Vật Lý</b></h3> <hr> <div class="row"> <div class="col-md-3" *ngFor="let tailieu of tailieu"> <a href="" target="_blank"> <img src="" alt="" width="100%" height="200"> <p class="text-center"></p> </a> <hr> </div> </div> </div> </content> - tailieu.component.ts
import { Component, OnInit } from '@angular/core'; import { AngularFire, FirebaseListObservable } from 'angularfire2'; import { FirebaseService } from '../services/firebase.service'; @Component({ selector: 'app-tailieu', templateUrl: './tailieu.component.html', styleUrls: ['./tailieu.component.css'] }) export class TailieuComponent implements OnInit { tailieu: any; constructor( private af: AngularFire, private firebaseService: FirebaseService ) { } ngOnInit() { this.firebaseService.getTailieu().subscribe(tailieu => { this.tailieu = tailieu; }); } }