Tìm hiểu Angular 5 (Phần 1)

Tìm hiểu Angular 5 (Phần 1)

0
Validator trong Angular 5
Hello ElectronJS

Giới thiệu

Angular là một framework Javascript được sử dụng rất nhiều trên các hệ thống web hiện nay. Tuy nhiên đối với những người mới học việc tiếp cận nó là một vấn đề khá khó khăn vì cấu trúc và cách sử dụng các thành phần khá phức tạp. Trong series về Angular này tôi sẽ hướng dẫn các bạn cách tìm hiểu và xây dựng ứng dụng web bằng Angular.

Trong series sẽ tìm hiểu một số nội dung chính như

  • Tổng quan về Angular và một vài thành phần chính
  • Tìm hiểu sâu hơn về validator với những form phức tạp (nhiều lớp component)
  • Tìm hiểu về store trong angular

 

Tổng quan 

Angular là một nền tảng giúp việc xây dựng web một cách dễ dàng. Ngoài ra có thể sử dụng Angular để viết native app cho di động hoặc desktop. Trước khi tìm hiểu sâu về Angular tôi khuyên bạn nên nắm chắc các kiến thức về JS, ECMAScript2015 (ES6) để tránh bị ngợp khi phải tìm hiểu một lúc quá nhiều thứ đến vậy

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

–  NodeJS: Với Angular 5 đang giới thiệu yêu cầu nodejs tối thiểu từ phiên bản 6.9.x và npm 3.x.x trở lên.

– Angular CLI: Angular CLI giúp việc xây dựng ứng dụng Angular dễ dàng và nhanh chóng hơn. Nó có thể làm được rất nhiều việc khởi tạo project, khởi tạo server, tự động sinh code, testing thậm chí là deploy ứng dụng. Để cài đặt chúng ta dùng câu lệnh (link tham khảo: https://cli.angular.io/)

npm install -g @angular/cli

Cấu trúc thư mục

├── src // thư mục chính
│   ├── app // thư mục chứa các component, service, module, route …
│   │ ├── app.component.css
│   │ ├── app.component.html
│   │ ├── app.component.spec.ts
│   │ ├── app.component.ts
│   │ └── app.module.ts
│   ├── environments // thư mục cài đặt các môi trường như develop, product
│   │ ├── environment.prod.ts
│   │ └── environment.ts
│   ├── index.html // trang html chính khi người dùng truy cập vào ứng dụng
│   ├── main.ts
│   ├── favicon.ico
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── e2e  // end-to-end tests cái này liên quan đến testing
├── angular-cli.json //config cho Angular CLI
├── karma.conf.js //unit test
├── package.json
├── protractor.conf.js //config
├── README.md
└── tslint.json

    Các thành phần chính trong Angular

  1. Module 
    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { PeopleListComponent } from './people-list.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, PeopleListComponent ],
providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    • imports: Một mảng để thêm các module khác nếu muốn sử dụng
    • declarations: Một mảng để khai báo các component muốn sử dụng trong template
    • providers: Chứa các service mà bạn muốn sử dụng trong component

     

  2. Component
    Tạo một component bằng angular-cli: ng generate component <component-name> sẽ tạo ra một vài file như :

    • Một file CSS để style các thành phần trong component
    • Một file html để tạo component template.
    • Một file TypeScript để thao tác các quá trình xử lý tương tác với template
    • Một file spec.ts phục vụ cho việc testing

    Chức năng của component là gì ?

    • Mỗi component có thể chạy như một ứng dụng độc lập, có tính module hóa rất cao, dễ dàng sử dụng mọi nơi.
    • Component có thể chứa lẫn nhau, điều này giúp việc tạo ra các view đơn giản hơn & tăng tính tái sử dụng

    * Lưu ý: Hạn chế sử dụng các hàm để lấy element như getElementId vì nó có thể ảnh hưởng đến việc tái sử dụng lại của chính component

    VD: Nếu bạn sử dụng component với id là avatar 2 lần thì nó sẽ luôn luôn chạy với component được gọi lần đầu tiên 

    chooseFile() {
 let e: HTMLElement = document.getElementById('avatar') as HTMLElement
 e.click()
}
  3. Services
    Trong angular 5 service là một class đóng gói một vài chức năng và cung cấp cho phần còn lại của ứng dụng giúp chia sẻ thông tin giữa các class VD: Một vài service api bạn xây để tương tác với API, logging, service dùng để truy cập dữ liệu trong store

    import { Injectable } from '@angular/core' -> import Injectable
import { ApiService } from '../../api.service'

@Injectable() -> Để đánh dấu class như một thành phần tham gia trong hệ thống dependency injection
export class AuthService {
  constructor(
    private api: ApiService
  ) { }
  login(email, password) {
    return this.api.notAuthCall('POST', '/companies/login', {email, password})
  }
  deleteAccount(profile) {
    return this.api.authCall('PUT', `/workers/update_profile`, profile)
  }
}

    Cách sử dụng service trong component

    • Đầu tiên import service vào trong module 
      import { NgModule } from '@angular/core'
import { AuthService } from 'app/services/auth.service'
@NgModule({
  imports: [
    CommonModule,
    AppStoreModule,
  ],
  declarations: [],
  providers: [
    AuthService, // Import AuthService
    FacebookService
  ]
})
export class ExampleModule {}
    • Sau đó bạn có thể sử dụng service trên component tương ứng 
      import { Component, OnInit } from '@angular/core'
import { AuthService } from 'app/services/auth.service'
@Component({
  selector: 'app-account-card',
  templateUrl: './account-card.component.pug',
  styleUrls: ['./account-card.component.styl']
})
export class AccountCardComponent implements OnInit {

  constructor(
    private authService: AuthService 
  ) {}
  ngOnInit() {
  }
}
  4. Routing
    –  Routing là việc chia ứng dụng thành các phần khác nhau dựa vào url hiện tại
    Sau đây là một ví dụ để giúp bạn có thể hiểu được cơ chế thực hiện của routing trong Angular

    • Tạo một file app.routes.ts để có thể config các url 
      import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const appRoutes: Routes = [
{ path: '',         component: HomeComponent }, 
  { path: 'contact',  component: ContactComponent }, // Khi load với url /contact thì ContactComponent sẽ được thực thi
]
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes),
  ],
  exports: [RouterModule],
})
export class AppRoutesModule { }
    • Sau đó import nó AppRoutesModule vào trong app.module.ts 
      import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppRoutesModule } from './app.routes'
// components
import { AppComponent } from './app.component'

// modules
import { HttpClientModule } from '@angular/common/http'
// services
import { ApiService } from './services/api/api.service'


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutesModule,
    HttpClientModule,
    ModalModule,
    AngularFontAwesomeModule
  ],
  providers: [ApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }
    • Trong file app.component.ts 
      import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // File html được hiển thị khi AppComponent thực thi
})
export class AppComponent {
}
    • Và cuối cùng là tạo file app.component.html 
      <div class="container">
<div class="header"></div>
<div class="body">// thực hiện phần component tương ứng với url đã config ở app.routes.ts</div>
<div class="side-bar"><a class="link">Home</a>
<a class="link">Contact</a> // link đến url /contact</div>
</div>

Qua bài viết này, tôi đã giới thiệu cho các bạn một số thành phần chính trong Angular. Phần 2 sẽ là phần mà nhiều bạn đọc quan tâm liên quan đến Validator trong Angular với những form từ đơn giản đến phức tạp (validator trên form có nhiều lớp component)

Tham khảo thêm tại: https://angular.io

Hello ElectronJS
Validator trong Angular 5

RECOMMENDED FOR YOU

Loading...
Newer Post
Older Post

COMMENTS