Angular- Bài 1 Tạo ứng dụng StackBlitz mẫu

Trong bài này anh sẽ hướng dẫn các em tạo 1 ứng dụng bằng Agular và giải thích các thành phần cơ bản của một ứng dụng Angular

Tạo Project

Mình có thể download source code về máy để chạy (https://github.com/codegymdanang/CGDN-Angular-StackBlitz) hoặc có thể chạy trực tiếp ví dụ trên cái link này https://stackblitz.com/angular/lrageyqaexo 

Các em sẽ thấy được giao diện soạn thảo bên dưới. 

Cái bên tay trái là cấu trúc dự án. 

Cái ở giữa là nơi mình sẽ code .

 Cái bên tay phải là ứng dụng 

pháp template

  1. Trong thư mục product-list, các em mở fileproduct-list.component.html ra.

  2. Mình sửa file  product list template để hiển thị tên của các sản phẩm

    1. Chúng ta muốn hiển thị danh sách tên các sản phẩm trên trang . Để làm như vậy chúng ta phải duyệt qua các phần tử directive *ngForvà đăt trong  trong thẻ div như đoạn mã bên dưới 

<h2>Products</h2>

<div *ngFor=”let product of products”>

</div>

*ngFor sẽ dùng để lập đi lập lại thẻ div đến phần tử cuối cùng của danh sách sản phẩm

  2 . Để hiển thị tên của sản phẩm thì mình dùng {{ }} để hiển thị các giá trị 

<h2>Products</h2> <div *ngFor=“let product of products”> <h3>

{{ product.name }} </h3>  

</div>

Khi chạy các em sẽ thấy được kết quả bên dưới. My Store sẽ hiện thị tất cả tên điện thoai

 

Thêm Mô tả cho sản phẩm. Chúng ta sử dụng *ngIf để kiểm tra nếu sản phẩm có phần mô tả thì chúng ta hiện ra còn nếu không có phần mô tả thì không hiện ra

  1. <h2>Products</h2>
  2. <div *ngFor=“let product of products”>
  3. <h3>
  4. <a [title]=“product.name + ‘ details'”>
  5. {{ product.name }}
  6. </a>
  7. </h3>
  8. <p *ngIf=“product.description”>
  9. Description: {{ product.description }}
  10. </p>
  11. </div>
  12. Kết quả

Chúng ta thêm nút Share để khi người dùng click vào nút share thì ta bắt được sự kiện và sử lý nó bên file product-list.component.ts. Sự kiện được định nghĩa bằng cách dung dâu () . Ví dụ sau đây

  1. <h2>Products</h2>
  2.  
  3. <div *ngFor=“let product of products”>
  4.  
  5. <h3>
  6. <a [title]=“product.name + ‘ details'”>
  7. {{ product.name }}
  8. </a>
  9. </h3>
  10.  
  11. <p *ngIf=“product.description”>
  12. Description: {{ product.description }}
  13. </p>
  14.  
  15. <button (click)=“share()”>
  16. Share
  17. </button>
  18.  
  19. </div>
  20. kết quả

 

Leave a Reply