Questions Management – Frontend – Xây dựng giao diện phần thêm mới question

Xem toàn bộ series bài viết hướng dẫn xây dựng ứng dụng Questions Management tại đây.

Để xây dựng giao diện cho phần thêm mới question trong phần Frontend của ứng dụng Questions Management, đầu tiên mình sẽ thêm mới một menu item tên là “New Question” trong menu item Questions ở phần sidebar bên trái.

Để làm được điều này, mình sẽ sửa tập tin sidebar.component.html như sau:

<li>
    <a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a routerLink="/questions">All Questions</a>
        </li>
        <li>
            <a routerLink="#">New Question</a>
        </li>
        <li>
            <a routerLink="/categories">Categories</a>
        </li>
    </ul>
    <!-- /.nav-second-level -->
</li>

<li>

<a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a>

<li>

<a routerLink="/questions">All Questions</a>

</li>

<li>

<a routerLink="#">New Question</a>

</li>

<li>

<a routerLink="/categories">Categories</a>

</li>

</ul>

</li>

Lúc này, nếu các bạn chạy ứng dụng, các bạn sẽ thấy kết quả của phần menu bên trái như sau:

Tiếp theo, mình sẽ tạo mới một component tên là NewQuestionComponent nằm trong thư mục src/app/questions/all_questions.

Nội dung ban đầu của NewQuestionComponent sẽ như sau:

import { Component } from "../../../../node_modules/@angular/core";

@Component({
    selector: 'qm-body',
    templateUrl: './new_question.component.html'
})
export class NewQuestionComponent {

}

import { Component } from "../../../../node_modules/@angular/core";

@Component({

selector: 'qm-body',

templateUrl: './new_question.component.html'

})

export class NewQuestionComponent {

}

với tập tin new_question.component.html có nội dung là:

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Add New Question</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <div>
        <div class="row">
            <div class="col-lg-12">
                    <form role="form">
                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control" rows="3"></textarea>
                            <p class="help-block">The description of the question.</p>
                        </div>
                        <div class="form-group">
                            <label>Category</label>
                            <select class="form-control">
                                <option>Oracle Certified Associate, Java SE 7 Programmer</option>
                                <option>Oracle Certified Associate, Java SE 8 Programmer</option>
                            </select>
                            <p class="help-block">The category which this question belong to.</p>
                        </div>
                        <button type="submit" class="btn btn-primary">Add New Question</button>
                    </form>
            </div>
        </div>
    </div>
</div>

<h1 class="page-header">Add New Question</h1>

</div>

</div>

<div>

<label>Description</label>

<p class="help-block">The description of the question.</p>

</div>

<label>Category</label>

<option>Oracle Certified Associate, Java SE 7 Programmer</option>

<option>Oracle Certified Associate, Java SE 8 Programmer</option>

</select>

<p class="help-block">The category which this question belong to.</p>

</div>

<button type="submit" class="btn btn-primary">Add New Question</button>

</form>

</div>

Bây giờ chúng ta sẽ khai báo NewQuestionComponent vào QuestionsModule:

import { NgModule } from "@angular/core";
import { CategoriesComponent } from "./categories/categories.component";
import { CommonModule } from "@angular/common";
import { FormsModule } from '@angular/forms';
import { AllQuestionsComponent } from "./all_questions/all_questions.component";
import { QuestionComponent } from "./all_questions/question.component";
import { AppRoutingModule } from "../app-routing.module";
import { NewQuestionComponent } from "./all_questions/new_question.component";

@NgModule({
    declarations: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent,
        NewQuestionComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        AppRoutingModule
    ],
    exports: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent,
        NewQuestionComponent
    ]
})
export class QuestionsModule {

}

import { NgModule } from "@angular/core";

import { CategoriesComponent } from "./categories/categories.component";

import { CommonModule } from "@angular/common";

import { FormsModule } from '@angular/forms';

import { AllQuestionsComponent } from "./all_questions/all_questions.component";

import { QuestionComponent } from "./all_questions/question.component";

import { AppRoutingModule } from "../app-routing.module";

import { NewQuestionComponent } from "./all_questions/new_question.component";

@NgModule({

declarations: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent,

NewQuestionComponent

imports: [

CommonModule,

FormsModule,

AppRoutingModule

exports: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent,

NewQuestionComponent

]

})

export class QuestionsModule {

}

Và khai báo Routing cho nó:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './questions/categories/categories.component';
import { AllQuestionsComponent } from './questions/all_questions/all_questions.component';
import { QuestionComponent } from './questions/all_questions/question.component';
import { NewQuestionComponent } from './questions/all_questions/new_question.component';

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'categories', component: CategoriesComponent },
    { path: 'questions', component: AllQuestionsComponent },
    { path: 'question/:id', component: QuestionComponent },
    { path: 'new-question', component: NewQuestionComponent },
    { path: '**', pathMatch: 'full', redirectTo: '/' }
]

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

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

import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';

import { CategoriesComponent } from './questions/categories/categories.component';

import { AllQuestionsComponent } from './questions/all_questions/all_questions.component';

import { QuestionComponent } from './questions/all_questions/question.component';

import { NewQuestionComponent } from './questions/all_questions/new_question.component';

const routes: Routes = [

{ path: '', component: DashboardComponent },

{ path: 'dashboard', component: DashboardComponent },

{ path: 'categories', component: CategoriesComponent },

{ path: 'questions', component: AllQuestionsComponent },

{ path: 'question/:id', component: QuestionComponent },

{ path: 'new-question', component: NewQuestionComponent },

{ path: '**', pathMatch: 'full', redirectTo: '/' }

]

@NgModule({

imports: [

RouterModule.forRoot(routes)

exports: [

RouterModule

]

})

export class AppRoutingModule { }

Bước cuối cùng chúng ta cần làm là sửa phần menu bên trái cho menu item “New Question” sử dụng directive routerLink của Angular để chúng ta có thể navigate tới trang “New Question” này.

<li>
    <a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a routerLink="/questions">All Questions</a>
        </li>
        <li>
            <a routerLink="/new-question">New Question</a>
        </li>
        <li>
            <a routerLink="/categories">Categories</a>
        </li>
    </ul>
    <!-- /.nav-second-level -->
</li>

<li>

<a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a>

<li>

<a routerLink="/questions">All Questions</a>

</li>

<li>

<a routerLink="/new-question">New Question</a>

</li>

<li>

<a routerLink="/categories">Categories</a>

</li>

</ul>

</li>

Bây giờ, nếu các bạn chạy lại ứng dụng và đi đến trang “New Question”, các bạn sẽ thấy kết quả như sau:

Khanh Nguyen

Share this post

Questions Management – Frontend – Xây dựng giao diện phần thêm mới question

Add Comment Hủy

Khanh Nguyen

Share this post

You might also like...

Questions Management – Hiện thực Turbine Stream với RabbitMQ

Questions Management – Support Turbine Stream – Khởi tạo project support-turbine-stream sử dụng Spring Tool Suite

Questions Management – Support Monitor Dashboard – Hiện thực Hystrix Dashboard

Questions Management – Support Monitor Dashboard – Khởi tạo project support-monitor-dashboard sử dụng Spring Tool Suite

Add Comment Hủy