Chào mọi người ! Ở những bài trước mình đã giới thiệu sơ lược về Angular cũng như cách sử dụng. Ở phần này, mình sẽ bắt đầu build một project Todo List với Angular + SpringBoot để cho các bạn dễ hiểu và thành thạo hơn. Các bạn hãy cùng xem nhé !
Đầu tiên các bạn hãy chắc chắn rằng mình đã cài đặt Angular rồi nhé. Để kiểm tra chúng ta có thể mở command(cmd) lên và nhập lệnh "ng –version" :
Nếu chưa cài đặt các bạn có thể tham khảo tại đây.
1.Khởi tạo project Angular Todo List
Đầu tiên, chúng ta sẽ sẽ dùng cd để trỏ tới thư mục muốn để project "cd link-thư-mục-muốn-lưu" ví dụ: "cd C:\Users\user\Desktop\todo-list"
Tiếp theo chúng ta sẽ tạo project Angular mới ở đây bằng lệnh "ng new name-project" ví dụ: "ng new todo-list"
Ở đây, nó sẽ hỏi là chúng ta có muốn add cái Angular routing không thì chúng ta chọn "Y" nhé ! Các bạn chọn CSS mà mình dùng ,ở đây thì mình chọn CSS.
Sau đó các bạn sẽ đợi nó chạy và khởi tạo project mới cho chúng ta. Kết Quả:
Vậy là quá trình khởi tạo new project Angular đã xong . Các bạn có thể cd tới project vừa tạo gõ "ng serve" và mở trình duyệt : http://localhost:4200/
2.Add project Angular vào VS Code
Ở đây mình dùng VS Code để import project Angular . Các bạn vào File -> Open Folder -> nơi các bạn để project:
Sau khi open chúng ta sẽ có như sau:
Tiếp đến chúng ta sẽ tạo mới 1 component, ở đây mình đặt tên là Welcome Component, chúng ta sẽ sử dụng lệnh: "ng generate component name-component "
Khi tạo xong 1 component mới chúng ta sẽ xem file "app.module.ts" nó sẽ có sự thay đổi ở @NgModule. Mọi component của Angular sau khi tạo xong sẽ được import vô file này:
Chúng ta sẽ mở tiếp file "welcome.component.ts" để xem selector của nó:
Copy selector ‘app-welcome’ và để vào file "app.component.html" như sau:
sau đó trên trình duyệt của chúng ta sẽ hiển thị:
Vậy là chúng ta đã tạo xong component Welcome , việc còn lại chúng ta chỉ việc code cho component này.
Bài viết này mình tạm dừng tại đây, mình sẽ cùng các bạn đi tiếp ở phần sau !