Bootstrapping

Chúng ta cần nói với Angular để nạp Component gốc của chúng ta thông qua một quá trình gọi là boostrapping. Và chúng ta cần phải thiết lập các tập tin index.html để host ứng dụng của chúng ta. Hãy xem tất cả các bước sau:

Hầu hết các ứng dụng Angular có một file index.html có chứa trang chính của ứng dụng. File index.html thường chỉ là một trang. Do đó một ứng dụng Angular thường được gọi là một Single Page Application (SPA). Nhưng đừng lo lắng, mặc dù tên gọi là “Ứng dụng một trang” nhưng chúng ta sẽ có rất nhiều trang giống như trong bản demo ở đầu khóa học này mà tôi đã giới thiệu.

Những gì chúng ta làm là thêm những phần của HTML vào trong trang index.html. Hãy xem cách mà chúng làm việc ở đoạn ví dụ dưới đây.

Đoạn code phía bên phải là app.comonent và selector: ‘pm-app’ sẽ là một chỉ thị trong HTML. Đoạn HTML bên trong template là những gì chúng ta muốn hiển thị. Phía bên trái là file index.html, nơi mà chúng ta muốn hiển thị app.component, Để chèn những HTML của app component chúng ta chỉ đơn giản thêm selector <pm-app></pm-app> vào nơi mà chúng ta muốn hiển thị chúng. Chúng ta gọi chúng là một directive (chỉ thị). Một directive về cơ bản là một custom element.

Nhưng làm sao để module loader tìm được component để khởi động ứng dụng? Chúng ta sẽ cần định nghĩa một root module, cái mà sẽ khởi động đầu tiên để bắt đầu ứng dụng. Bạn có thể đặt tên module này bất cứ tên nào bạn muốn, thông thường tên module gốc là AppModule. Đoạn code sau là những gì tối thiểu phải có để tạo ra một AppModule

• @NgModule để xác định Class AppModule là một Angular Module. @NgModule cũng sẽ có những metadata object, cái mà sẽ nói cho Angular biết cách biên dịch và khởi chạy ứng dụng của chúng ta.

  • Imports: import module BrowserModule, module này cần cho mọi ứng dụng chạy trên trình duyệt.

  • Declarations: Khai báo những component sẽ được sử dụng trong module này.

  • Boostrap: Component gốc được Angular tạo ra và chèn vào trong index.html

Để tìm hiểu sâu hơn về Angular Module chúng ta sẽ theo dõi tiếp ở chặng đường tiếp theo, Tất cả những gì bạn cần biết bây giờ là 3 thuộc tính trên.

Tuy nhiên một ứng dụng Angular có thể có nhiều hơn một module, vậy làm sao để Angular biết được sẽ phải khởi chạy module nào đầu tiên? Chúng ta có rất nhiều cách để khởi chạy (boostrap) một ứng dụng, điều phụ thuộc vào cách bạn muốn Angular biên dịch ứng dụng như thế nào và nơi bạn muốn chạy ứng dụng là ở đâu? Ở trong khóa học này chúng ta sẽ lần lượt tiếp cận 2 cách biên dịch ứng dụng là JIT và AOT. Đoạn code dưới đây là một ví dụ cụ thể để khởi chạy một ứng dụng bằng JIT.

Một điều may mắn là thiết lập file boostrap này gần như không thay đổi trong suốt quá trình chúng ta code ứng dụng, nên bạn cũng không cần quá bận tâm về nó.

Cuối cùng, bạn cũng đã biết cách để tạo ra một Root Module, chỉ định module này khởi chạy một component mà bạn mong muốn, chèn một chỉ thị (directive) vào index.hml để hiển thị giao diện component. Hiện tại chúng ta chỉ có một module, nhưng khi ứng dụng phát triển lớn hơn, chúng ta sẽ chia ứng dụng thành những module tính năng nhỏ hơn, một trong số những module đó sẽ “lazy loaded” tức là module đó chỉ chạy khi bạn thực sự ghé thăm những tính năng đó.