Giới thiệu

AngularJS là một framework ứng dụng web mã nguồn mở. Nó được phát triển lần đầu năm 2009 bởi Misko Hevery và Adam Abrons. Hiện tại nó được duy trì bởi Google. AngularJS là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của AngularJS loại bỏ phần lớn code mà bạn thường phải viết.

Tính năng AngularJS mang lại:

• AngularJS là một Framework phát triển mạnh mẽ dựa trên JavaScript để tạo các ứng dụng RICH Internet Application (RIA).
• AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng dụng trong mô hình MVC (Model View Controller) một cách rõ ràng.
• Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản trình duyệt web. nó tự động xử lý mã JavaScript để phù hợp với mỗi trình duyệt.
• AngularJS có mã nguồn mở, miễn phí hoàn toàn, được sử dụng bởi hàng ngàn lập trình viên trên thế giới.

Tạo 1 component trong Angular 4

Trong src/app/Components/People mình tạo file ra people.component.ts

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

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html'
})

export class PeopleComponent {
  titlePeople = "Demo Component"
}

Tiếp theo mình gọi Components mình mới tạo ra trong file app.module.ts để nó chạy được trong thư mục src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { PeopleComponent } from './Components/People/people.component';

@NgModule({
  declarations: [
    AppComponent,
    PeopleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Mình cần import PeopleComponent vào trong app.module.ts để nó có thể chạy được

import { PeopleComponent } from './Components/People/people.component';

Bây giờ mình vào srec/app/app.component.html mình gọi ra là xong

<app-people></app-people>

Mình sẽ giải thích selecetor <app-people> ở đâu ? Nó chính trong file people.component.ts

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html'
})

Đó chính là selector của nó

Bây giờ trong component ( people.component.ts )

export class PeopleComponent {
  titlePeople = "Demo Component"
}

Đó chính là biến mình sẽ gọi ra trong file pepople.component.html

<h2>{{ titlePeople }}</h2>

Và khi run lên thì nó sẽ hiển thị trên trình duyệt là Demo Component

Lời kết

Thông qua ví dụ ở trên thì các bạn đã phần nào hiểu rõ cách tạo ra 1 Component trong Angular4 đây là cơ sở để các bạn mới tiếp xúc Angular có kiến thức căn bản để tạo ra những Component phức tạp hơn .