3.1.Thiết kế kiến trúc
a. Mô tả công nghệ sử dụng:
Dự án sử dụng công nghệAngular 2.
b. 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á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.
Triển khai dự án trên heroku
d. Cơ sở dữ liệu
- Mongodb, liên kết cơ sở dữ liệu với mlab.com
e. 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.module.ts , ví dụ:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { ChangeprofileComponent } from './changeprofile/changeprofile.component';
import { SearchingAndExploreComponent } from './searching-and-explore/searching-and-explore.component';
import { PostComponent } from './post/post.component';
import { RegisterComponent } from './register/register.component';
Route đến các component :
RouterModule.forRoot([
//login
{
path: '',
component: LoginComponent
},
//home
{
path: 'home',
component: HomeComponent
},
//profile
{
path: 'profile',
component: ProfileComponent
},
{
path: 'changeprofile',
component: ChangeprofileComponent
},
{
path: 'searching-and-explore',
component: SearchingAndExploreComponent
},
{
path: 'post',
component: PostComponent
},
{
path: 'register',
component: RegisterComponent
}
],
f. Thông tin các thư viện sử dụng
f.1. Thư viện jQuery
f.2. Các thư viện Angular 2
- system.js: được gọi là “Universal dynamic module loader”,viết dựa trên es6-module-loader để thay vì chỉ load các module của es6 thì còn có thể load được cả CommonJs, AMD, global script.
- typescript.js: là transpiler cho system.js sử dụng để dịch TypeScript thành JavaScript.
- angular2-polyfills.js: file này thực chất là hợp nhất giữa zone.js và reflect-metadata .
- rx.js: Là thư viện Observables, thuật ngữ này sẽ gặp nhiều khi đi sâu vào Angular, nó được bổ sung giống Promises ở AngularJS.
- angular2.dev.js
f.2. Các thư viện Bootstrap