Tạo component trong angular 2 - Multiple Components

Nơi các thành viên thảo luận các vấn đề liên quan lập trình Angular 1x, Angular 2x
Trả lời
Hình đại diện của người dùng
phucbv
Bài viết: 13
Ngày tham gia: T.Tư Tháng 4 12, 2017 10:00 pm
Đến từ: Đắk Lắk
Liên hệ:

CN Tháng 4 23, 2017 3:42 pm

TẠO COMPONENT TRONG ANGULAR 2 - MULTIPLE COMPONENTS

Bài trước mình đã hướng dẫn bạn cách tạo project trong angular 2. Bài này mình sẽ sử dụng project đó tạo component có tên là Products.
Để biết được chi tiết hơn các tạo component thì các bạn vào trang https://angular.io/docs/ts/latest/tutorial/toh-pt3.html nhé.
Đây là cấu trúc của một project trong angular 2.
h1.png
h1.png (14.44 KiB) Đã xem 692 lần
Bước 1: Bạn vào src/app tạo 1 file products.component.ts (cấu trúc tên 1 component là component-name.component.ts) được viết theo kiểu “lower dash case”. Component có tên là ProductsComponent được viết theo kiểu “upper camel” có nội dung như sau.
h2.png
h2.png (33.9 KiB) Đã xem 692 lần

Mã: Chọn hết

import { Component, Input } from '@angular/core';
@Component({
  selector: 'products-component',
  template: `<h2>Chào bạn đến với trang products</h2>`
})
export class ProductsComponent {
    
}
Bước 2: Sau đó import và khai báo nó mới ngModule tại file app.module.ts:
h3.png
h3.png (56.44 KiB) Đã xem 692 lần

Mã: Chọn hết

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ProductsComponent } from './products.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Bước 3: Đưa thẻ selector của products component vào AppComponent template, nơi mà bạn muốn hiển thị nội dung của ProductsComponent.
Bạn vào file src/app/app.component.html thêm đoạn <products-component></products-component> vào nơi muốn hiển thị.
h4.png
h4.png (19.67 KiB) Đã xem 692 lần

Mã: Chọn hết

<h1>
  {{title}}
</h1>
<products-component></products-component>
Bước 4: Chạy ứng dụn để thấy kế quả.
h5.png
h5.png (8.11 KiB) Đã xem 692 lần


Vậy là các bạn đã tạo thành công 1 component mới rồi đó. Nhưng bạn để ý dòng code template.
h6.png
h6.png (14.67 KiB) Đã xem 692 lần
Trong thực tế thì thông thường chúng ta hok đưa hết thẻ html trực tiếp vào như thế này mà ta hay tách ra 1 file html riêng. vì vậy mình sẽ sửa lại như thế này.

Bước 5: Tại src/app Tạo 1 file template với tên là products.template.html . Sau đó đưa nội dung tại template vào file vừa tạo (products.template.html)
h7.png
h7.png (21.83 KiB) Đã xem 692 lần
Bước 6: Đưa vào đường dẫn file template chúng ta vừa tạo bằng cách thêm đoạn code:
h8.png
h8.png (31.16 KiB) Đã xem 692 lần

Mã: Chọn hết

import { Component, Input } from '@angular/core';
@Component({
  selector: 'products-component',
  templateUrl: 'products.component.html'
})
export class ProductsComponent {
    
}
Bước 7: chạy ứng dụng và xem kết quả.
h5.png
h5.png (8.11 KiB) Đã xem 692 lần

Hình đại diện của người dùng
lephong
Bài viết: 1
Ngày tham gia: T.Hai Tháng 4 10, 2017 6:10 pm
Đến từ: HCM

T.Tư Tháng 4 26, 2017 9:20 am

link bài đầu tiên ở đây nhé các bạn
tutorials-f43/angular-huong-dan-cai-dat ... i-t44.html

Hình đại diện của người dùng
thientruongnd
Bài viết: 3
Ngày tham gia: T.Tư Tháng 4 26, 2017 11:31 am

T.Hai Tháng 5 29, 2017 10:15 pm

bạn để ý có một file index.html ở file này nó chưa toàn bộ css, javasript, jquery, Trường hơp index đó là trang login, thì số lương css, js sử dụng it. Nhưng khi login thành công vào trang main thì css, js nhiều hơn hoặc không sử dụng css, và js ở trang login thì bạn sử lý thế nào
thanks

Trả lời
  • Thông tin
  • Đang trực tuyến

    Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách