3.1 Thiết kế kiến trúc
Mô tả công nghệ sử dụng
Các thành phần phía client
- Phía Client: Sử dụng framework Angular 2 làm cốt lõi phát triển front-end, framework Boostrap để hỗ trợ phần giao diện hiển thị.
Các thành phần phía server
- Sử dụng Node.js và npm để thiết lập môi trường phát triển ứng dụng.
Cơ sở dữ liệu
- Cơ sở dữ liệu được tạo trên mockapi.io, sử dụng http service và thư viện rxjs để tương tác vs dữ liệu trên mockapi
Các đường kết nối giữa các thành phần
- Các đường kết nối giữa các thành phần được viết trong file app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {appRoutes} from './app.routes';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { OnlineTestComponent } from './onlinetest.component';
import { BaigiangListComponent } from "./baigianglist.component";
import { BaigiangComponent, SafePipe } from "./baigiang.component";
import{ BaigiangtoanComponent} from './baigiangtoan.component';
import {BaigiangService} from './services/baigiang.service';
import {ListbaigiangService} from './services/listbaigiang.service';
@NgModule({
declarations: [
AppComponent,
OnlineTestComponent,
HomeComponent,
BaigiangtoanComponent,
BaigiangListComponent,
BaigiangComponent,
SafePipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
appRoutes
],
providers: [ BaigiangService, ListbaigiangService],
bootstrap: [AppComponent]
})
export class AppModule { }
- Đường dẫn đến các component:
const routing: Routes = [
{ path: '', component: HomeComponent},
{ path: 'onlinetest', component: OnlineTestComponent},
{ path: 'bglist/:id', component: BaigiangComponent },
{ path: 'baigiang', component: BaigiangListComponent },
{ path: 'baigiangtoan', component: BaigiangtoanComponent}
]
Các thư viện Bootstrap