Tìm hiểu sơ lược về Angular và những công cụ hổ trợ

[takiet60]

• Nhiệm vụ lần này nhóm mình sẽ nghiên cứu cơ bản về Angular, các phần nhóm sẽ nghiên cứu:

1. Làm sao tạo một dự án Angular ?
2. Cấu trúc một dự án về Angular, nêu sơ lược những phần chính ?
3. Component trong Angular là gì ? Làm sao tạo ra một component ?
4. Nêu các cách binding dữ liệu trong Angular ?
5. Nghiên cứu về Style, Class, Model trong Angular ?

• Yêu cầu:

1. Để lại viết câu trả lời các câu hỏi trên trong phần comment.
2. Tất cả các thành viên đều tham gia tìm hiểu.

• Thời gian:

Hạn chót sau 3 ngày ngày giao nhiệm vụ 19h thứ 5 ngày 3 tháng 6 năm 2021.

• Kết quả:

• [x] Phùng Minh Đạt hoàn thành

• [x] Tạ Anh Kiệt hoàn thành

• [x] Nguyễn Thành Long hoàn thành

[takiet60]

1. Để tạo một dự án Angular, ta khởi động terminal và di chuyển đến thư mục để lưu dự án và sử dụng lệnh ng new
2. Về cấu trúc của Angular ta có:

• File index.html và file css (scss) để làm file global dùng chung cho mọi trang.
• Trong file index.html sẽ chứa tag đây là tag chỉ đến file app.component
• Mọi component sau được tạo ra sẽ được thêm vào file app.component.html để thực hiện decor.

3. Component trong Angular cũng tương tự như các framework khác. Component là những khối xây dựng nên một dự án trong Angular. Trong component sẽ có file html, style, typescript, testing. Để tạo một component trong Angular ta sử dụng lệnh ng generate component
4. Có hai cách binding dữ liệu trong Angular là property binding và event binding.

• Property binding: {{ property }} hoặc là <img [src]="srcname" />
• Event binding: <button (click)="onClick()">
  5. Style, Class sử dụng để thêm style, class vào từng thành phần trong trang html [style]="stylename" Model thì đặc biệt hơn sử dụng phải import FormHttp và binding [(model)]="modelname"

[minhdat1602]

1. ng new project_name tại worspace

2. tham khảo structure project này app -----_models -----_services -----_shared ----------shared components ----------shared modules -----home -----whatever page ----------whatever's specific components

3. Các thành phần là khối xây dựng chính cho các ứng dụng Angular. Mỗi thành phần bao gồm: HTML template, typescript class, css selector, css style.

4. • Property binding sets a specific element property.
   • vd: <td [attr.colspan]="1 + 1">One-Two
   • Event binding listens for an element change event.
   • vd : <button (click)="onSave()">Save
   • Two-way binding combines property binding with event binding:
     5. • style example : [style.width]="width"
        • class example : [class.sale]="onSale"
        • model example: khai báo model Car, sử dụng trong model User bằng cách import
        • export class Car { brand: string; year: number; }
        • import {Car} from "./car.model"; export class User { id: number; name: string; car: Car; }

[thanhlong3200]

1. Làm sao tạo một dự án Angular ?
   • Mở cửa sổ terminal dùng lệnh di chuyển con trỏ đến workspace rồi gõ lệnh tạo project như sau: ng new project_name
2. Cấu trúc một dự án về Angular, nêu sơ lược những phần chính ?
   • Ứng dụng sẽ được đặt ở thư mục src nó bao gồm tất cả các thành phần của angular: components, templates, styles, images,...
   • Mọi files ngằm ngoài thư mục này sẽ tồn tại với mục đích hỗ trợ building ứng dụng.
   • Single page sẽ là file index.html điểm bắt đầu của ứng dụng
   • Các thành phần quan trọng như: components, templates, styles… sẽ nằm trong thư mục src/app
   • Các thành phần như hình ảnh, audio… sẽ nằm trong src/assets
   • dist là thư mục không có sẳn khi khởi tạo mà được build app để up lên server, phần này sẽ được đề cập sau.
   • E2E là thư mục thường dùng cho việc testing code.
   • node_modules là thư mục chứa những module để khởi chạy ứng dụng.......
3. Component trong Angular là gì ? Làm sao tạo ra một component ?
   • Component là một lớp nó thường hiểu như là controller tương tác giao diện người dùng. Một component thường có 3 thành phần chính là code TypeScript, template HTML và CSS.
   • Để tạo component mới, ta sử dụng lệnh Angular CLI: ng generate component hoặc ng g c 4.Nêu các cách binding dữ liệu trong Angular ?
   • Property Binding: Binding dữ liệu từ View tới các thuộc tính (property or attribute) trong thẻ html {{ property }} hoặc là <img [src]="srcname" /> Event binding:
   • Event Binding: Binding sự kiện của thẻ trong HTML với hàm chức năng trong phần Logic, như các sự kiện click, keychange,… <button (click)="onClick()">
   • Two-way Binding: Kiểu Binding cho phép bắt các thay đổi dữ liệu cho cả 2 chiều, cả từ phần Logic ra Template và ngược lại. <input-tags [(ngModel)]="logicVariable">
4. Nghiên cứu về Style, Class, Model trong Angular ?
   • Style, Class sử dụng để thêm style, class vào từng thành phần trong trang html
     ví dụ khai báo thẻ div có class 'ok'
   • Ng-model là một directive dùng để liên kết dữ liệu với client, một số người gọi nó là ngModel.
   • ng-model sẽ liên kết với thuộc tính scope sử dụng ngModelController (được khởi tạo và bởi ng-model). ví dụ : chỉ cho phép vào input có phải là các chữ số hay không