Trong bài tutorial này, chúng ta sẽ sử dụng Visual Studio để thực hành viết một trang Login sử dụng Angular Material và làm quen với 4 thành phần của Angular là Module, Component, Template và Data binding (chi tiết tại bài Tổng quan về Angular)

Trước hết, chúng ta mở chương trình Visual Studio, vào phần Terminal chọn new Terminal để mở CLI và tạo một Angualar project và cài đặt Angular material với dòng lệnh sau:

Lưu ý: Nếu các bạn gặp lỗi “ng.ps1 cannot be loaded because running scripts is disabled on this system”, các bạn có thể tham khảo hướng dẫn cách khắc phục tại đây.

Sau khi Angular hoàn tất việc tạo mới project, ta vào FirstApp/src/app để tiết hành viết chương trình ứng dụng. Tại đây, Angular đã tạo sẵn root component là AppComponent bao gồm 5 files sau:

– app.module.ts: module của AppComponent (root component)

– app.component.ts: component của ứng dụng

– app.component.html: template của AppComponent

– app.component.css: cấu hình CSS stylesheet cho AppComponent

– app.component.spec.ts: unit test cho AppComponent

Ngoài ra, khi tạo mới project nếu chúng ta chọn sử dụng routing thì sẽ có thêm file app-routing.module.ts để cấu hình routing cho ứng dụng Angular.

Trong bài này, chúng ta sẽ viết một ứng dụng login với giao diện như sau:

4 thành phần được sử dụng trong bài này là:

1. Template (app.component.html)

Chúng ta viết template của ứng dụng như sau:

Ta sử dụng class để cấu hình stylesheet cho ứng dụng trong file app.component.css như sau:

2. Module (app.module.ts)

Trong template trên chúng ta sử dụng 3 modules của Angular Material là mat-card, mat-form-field và mat-button. Do đó trong file app.module.ts chúng ta phải thực hiện import các modules này (các bạn truy cập vào https://material.angular.io/components, chọn component tương ứng và tiến hành copy API của component đó).

Ngoài ra, trong ví dụ này chúng ta cũng sử dụng ngModel, do đó ta cần thực hiện import FormsModule trong file app.module.ts

Như vậy Module của ứng dụng như sau:

3. Data binding

Trong ví dụ này chúng ta sử dụng 3 loại data binding:

– Two-way data binding: ta sử dụng ngModel để truyền nhận giá trị username và password mà người dùng nhập vào.

– Event binding(): gọi hàm login() để xử lý thông tin đăng nhập khi người dùng thực hiện click vào login button

– Interpolation: hiển thị kết quả đăng nhập thông quá giá trị của login_result

4. Component (app.component.ts)

Trong template trên, ta sử dụng 3 biến (log_email, log_pw, login_result) và một hàm là login(). Do đó, component của ứng dụng sẽ được viết như sau:

Lưu ý:

– Khi Studio báo lỗi “Property ‘log_email’ has no initializer and is not definitely assigned in the constructor”: vào file tsconfig.json và chỉnh giá trị “strict” thành false

– Khi Studio báo lỗi Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’: thực hiện import FormsModule vào file app.module.ts

Cuối cùng, ta khởi chạy ứng dụng Login với lệnh ng serve, ta được kết quả như sau:

Như vậy chúng ta đã hoàn thành việc viết một trang login trong Angular và làm quen với 4 thành phần của Angular là Module, Component, Template và Data binding. Các bạn có thể tham khảo toàn bộ code trong bài hướng dẫn này trong trang Github của Itech Seeker tại đây.

Tháng Tám 22, 2021
ITechSeeker