Sign up
227
0
Web Development

[Angular] Part 3 : Tìm hiểu cách thức khởi chạy của App

Nguyễn Nam
Nguyễn Nam
19/04/2020 · 3 min read
227
angular
Thời gian đọc: 3 phút

Ở bài trước , mình đã giải thích sơ lược về ý nghĩa các file trong 1 project Angular. Vậy tiếp theo , trong bài viết này chúng ta sẽ đi tìm hiểu tiếp một app Angular sẽ được tải và băt đầu khởi chạy như thế nào .

Khi bạn tạo một ứng dụng Angular và chạy nó bằng cách sử dụng "ng serve" trong command(cmd). Thì trên browser nó sẽ hiển thị như sau:

Bây giờ chúng ta sẽ xem cách mà một app Angular được tải và bắt đầu.

Đầu tiên, hãy vào file app.compoment.html , xóa hết code và viết 1 đoạn HTML đơn giản :

<h3>This is first angular application and I’m in app component.</h3>

Sau khi thay thế :

app Angular

Bạn cũng có thể thấy nó trong trình duyệt:

app AngularỞ đây, trước khi in ra màn hình đoạn HTML trên thì server đã thực thi file index.html trước:

app AngularAngular là một framework cho phép chúng ta tạo "Single Page Applications" và ở đây index.html là trang duy nhất được cung cấp bởi server:

Index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Todo Applications</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

đoạn code ở trên trông giống như HTML thông thường và ở đây thẻ <title> hiển thị tiêu đề trong trình duyệt với tiêu đề của ứng dụng. Nhưng code trong thẻ <body> khác với code HTML thông thường. Tại đây, bạn thấy thẻ "<app-root>" do CLI cung cấp. Chúng ta có thể nói rằng, bất cứ khi nào chúng ta tạo một dự án từ CLI, theo mặc định một component được tạo, tức là "app component".

Bây giờ, chúng ta hãy xem tệp " app.component.ts ". Nó là một tệp TypeScript. Bạn có thể thấy thuộc tính "selector" :

Giá trị của thuộc tính selector "app-root" sẽ giúp app component có thể được add vào phần body của file index.html như trên với mẫu file HTML của component là "./app.component.html".

Tiếp theo chúng ta sẽ xem Angular được kích hoạt thế nào ?

Bất cư khi nào sử dụng "ng serve" thì nó sẽ tạo ra các "bundles" và tự động thêm chúng vào tệp index khi chạy . Vì vậy từ các bundles này, thì đoạn code đầu tiên phải được thực thi trong file "main.ts" . Tức là file main.ts là file chính  và từ đó việc thực thi ứng dụng Angular được bắt đầu.

File main.ts:

Bây giờ, bạn có thể thấy rằng ứng dụng Angular được tải và chạy dưới dạng:

main.ts > > app.Module.ts > > app.component.ts > > index.html > > app.component.html

Ở phần này chúng ta sẽ tạm dừng tại đây , hẹn gặp lại các bạn ở những bài viết tiếp theo !

0