ANGULAR 4X
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Ứng dụng single page Angular 4

Trong phần này chúng ta sẽ tổng hợp các kiến thức đã được học trong toàn bộ series này để tạo thành một ứng dụng single page nho nhỏ: có các thành phần header, footer cố định; 2 view : view login và view thông tin bạn đọc Freetuts. Ở view login nếu nhập đúng thông tin username và password thì user sẽ được chuyển đến view thông tin bạn đọc Freetuts.

Ứng dụng của chúng ta sau khi hoàn thiện sẽ nhìn như sau

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Giao diện đăng nhập:

Giao diện đăng nhập

Giao diện thông tin bạn đọc

Giao diện bạn đọc

Ok. Ý tưởng là như vậy. Chúng ta cùng bắt tay vào làm nhé.

Phân tích giao diện

Giao diện của chúng ta có 3 phần chính: phần header, phần view chính và phần footer

Ba thành phần giao diện

Header, footer, view login, view bạn đọc là các component mà ta đã được học trong bài Component trong Angular 4.

Header và footer là các thành phần cố định, chỉ có phần view chính sẽ thay đổi tuỳ thuộc vào router. Như vậy ta cần sử dụng kiến thức về router đã được học trong bài Router trong angular 4. Bạn nào quên có thể click vào đây để xem lại nhé.

Trong view login và view bạn đọc đều có các form. Trong các form này, ta sử dụng kĩ thuật Form validate đã được học trong các bài trước.

Như vậy là trong một ví dụ trên, chúng ta nhớ lại và xâu chuỗi được khá nhiều kiến thức: Component, router, form.

Tạo các component

Để tạo các component, ta lần lượt chạy các lệnh 

ng g component header

ng g component footer

ng g component userlogin

ng g component mainpage

Sau khi chạy xong các lệnh trên hoàn thành, màn hình command line trông như sau

Màn hình cmd sau khi chạy các lệnh xong

Mở file app.module.ts ra, ta thấy các component đã được import vào tự động

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule, MatInputModule} from '@angular/material';
import {HttpModule} from "@angular/http";

const appRoutes: Routes = [
  {
     path: '',
     component: UserloginComponent
  },
  {
     path: 'app-mainpage',
     component: MainpageComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    UserloginComponent,
    MainpageComponent
  ],
  imports: [
    BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MatTableModule,
      MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ở file app.component.html, ta chỉnh sửa nội dung như sau

app.component.html
<div class="mainpage">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>

Ở đây, ta đã sử dụng 2 component header và footer thông qua selector của các component này và sử dụng thẻ <router-outlet> để định nghĩa vị trí mà view trong router cấu hình sẽ hiển thị ra.

Tạo giao diện cho header, footer

Ở file header.component.html, chúng ta thêm nội dung

header.component.html
<div style="margin-bottom: 50px;  text-align: center;">
    <img style="width: 240px; height: 60px;" src="https://freetuts.net/public/logo/hoc-lap-trinh-online.png" width="100" height="100">
    <h2>Cung cấp các khoá học online chất lượng</h2>
</div>
<hr/>

Tương tự với file footer.component.html

footer.component.html
<hr/>
<h3 style="text-align: center;">Hướng dẫn bởi Freetuts.net &copy; 2018</h3>

Tạo giao diện "login"

Tại giao userlogin component, ta thêm vào nội dung cho file userlogin.component.html

userlogin.component.html
<div class="form_container">
  <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
     <header>Đăng nhập hệ thống bạn đọc Freetuts</header>
     <label>Username <span>*</span></label>
     <input type="text" name="uname" formControlName="uname"/>
     
     <div class="help">Ít nhất 6 kí tự</div>
     <label>Mật khẩu <span>*</span></label>
     <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
     
     <div class="help">Phân biệt hoa thường</div>
     <button [disabled]="!formdata.valid" value="Login">Đăng nhập</button>
  </form>
</div>

Ở file userlogin.component.ts, ta thêm code xử lý

userlogin.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "freetuts_audience" && data.passwd == "freetuts.net") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

Ở đây, ta định nghĩa khi login với username là freetuts_audience và password là freetuts.net thì thông báo đăng nhập thành công và chuyển tới url là app-mainpage.

Thêm 1 chút css trong file userlogin.component.css để hiển thị bắt mắt hơn

userlogin.component.css
.form_container{
    margin : 0 auto;
    width:600px;
 }
 
 form {
    background: white;
    width: 500px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
    font-family: lato;
    position: relative;
    color: #333;
    border-radius: 10px;
 }
 
 form header {
    background: #FF3838;
    padding: 30px 20px;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
 }
 
 form label {
    margin-left: 20px;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 5px;
    position: relative;
 }
 
 form label span {
    color: #FF3838;
    font-size: 2em;
    position: absolute;
    left: 2.3em;
    top: -10px;
 }
 form input {
    display: block;
    width: 50%;
    margin-left: 20px;
    padding: 5px 20px;
    font-size: 1em;
    border-radius: 3px;
    outline: none;
    border: 1px solid #ccc;
 }
 
 form .help {
    margin-left: 20px;
    font-size: 0.8em;
    color: #777;
 }
 
 form button {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: inherit;
    color: white;
    background: #FF3838;
    outline: none;
    border: none;
    padding: 5px 15px;
    font-size: 1.3em;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
 }
 form button:hover {
    background: #ff5252;
 }

Cùng chạy thử và login với user là freetuts_audience, ta nhận được thông báo đăng nhập thành công như hình dưới

Giao diện đăng nhập thành công

Tạo giao diện "bạn đọc freetuts"

Mở file mainpage.component.html ra và thay đổi nội dung thành

mainpage.component.html
<div class="form_container">
  <form [formGroup]="formdata" (ngSubmit)="onClickSubmit(formdata.value)">
    <header>Thông tin bạn đọc Freetuts</header>
    <label>Họ và tên
      <span>*</span>
    </label>
    <input type="text" name="name" formControlName="name" />
    <label>Số ĐT
      <span>*</span>
    </label>
    <input type="text" name="phone" formControlName="phone" />
    <label>Địa chỉ
      <span></span>
    </label>
    <input type="text" name="address" formControlName="address" />
    <label>Lời nhắn gửi
      <span></span>
    </label>
    <input type="text" name="message" formControlName="message" />
    <button [disabled]="!formdata.valid" value="Submit">Submit</button>
    <button routerLink = "">Trở lại</button>
  </form>
</div>
<br/>
<div id="custtable" style="display:none;margin:0 auto;">
  <table>
    <thead>
      <tr>
        <th>Họ và tên</th>
        <th>SDT</th>
        <th>Địa chỉ</th>
        <th>Lời nhắn gửi</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of cutomerdata">
        <td>{{item.name}}</td>
        <td>{{item.phone}}</td>
        <td>{{item.address}}</td>
        <td>{{item.message}}</td>
      </tr>
    </tbody>
  </table>
</div>

Tiếp đó đến file mainpage.component.ts

mainpage.component.html
import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata = [];
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         name: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         phone: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         message:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      var row = {
          "name" : data.name,
          "phone" : data.phone,
          "address" : data.address,
          "message" : data.message
      };
      
      this.cutomerdata.push(row);
      console.log(this.cutomerdata);
   }
}

Sửa nội dung mainpage.component.css cho giao diện bắt mắt hơn

mainpage.component.css
.form_container{
    margin : 0 auto;
    width:600px;
 }
 
 form {
    background: white;
    width: 500px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
    font-family: lato;
    position: relative;
    color: #333;
    border-radius: 10px;
 }
 
 form header {
    background: #FF3838;
    padding: 30px 20px;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
 }
 
 form label {
    margin-left: 20px;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 5px;
    position: relative;
 }
 
 form label span {
    color: #FF3838;
    font-size: 2em;
    position: absolute;
    left: 2.3em;
    top: -10px;
 }
 form input {
    display: block;
    width: 50%;
    margin-left: 20px;
    padding: 5px 20px;
    font-size: 1em;
    border-radius: 3px;
    outline: none;
    border: 1px solid #ccc;
 }
 
 form .help {
    margin-left: 20px;
    font-size: 0.8em;
    color: #777;
 }
 
 form button {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: inherit;
    color: white;
    background: #FF3838;
    outline: none;
    border: none;
    padding: 5px 15px;
    font-size: 1.3em;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
 }
 form button:hover {
    background: #ff5252;
 }

 td,
 th{
     border: 1px solid black;
     padding: 15px;
 }

Ok. Sau khi hoàn thành, chúng ta cùng kiểm tra thì thấy như hình dưới

Kết quả hiển thị cuối cùng

Đến đây thì ứng dụng của chúng ta đã hoàn thành rồi. Bài này có lẽ là bài cuối trong series Angular 4 rồi. Có gì khó khăn hay bị lỗi thì bạn hãy đặt câu hỏi để được hỗ trợ.

Hẹn gặp lại các bạn trong các series Angular 4 khác nhé :)

Tổng hợp dữ liệu trong bài:

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Tổng quan về Angular4

Tổng quan về Angular4

Trong bài này, chúng ta sẽ tìm hiểu tổng quan về Angular 4.

Top