Bootstrap có hoạt động với Angular không?

Quá trình tải chỉ mục. trang html, mô-đun cấp ứng dụng và thành phần cấp ứng dụng được gọi là khởi động hoặc tải ứng dụng. Trong hướng dẫn này, bạn sẽ tìm hiểu về nội bộ của quy trình bootstrapping

Angular thực hiện các bước sau để khởi động ứng dụng

1. Chỉ số tải. html
2. Tải góc, thư viện khác và mã ứng dụng
3. thực hiện chính. tập tin ts
4. Tải mô-đun cấp ứng dụng
5. Tải thành phần cấp ứng dụng
6. Mẫu quy trình

Chỉ số tải. html

Điểm bắt đầu của bất kỳ ứng dụng web Angular nào là chỉ mục. trang html. Trang này đề cập đến tất cả các tệp JavaScript cần thiết cho ứng dụng. Nếu bạn kiểm tra chỉ số. html sau khi xây dựng một dự án Angular, bạn sẽ thấy rằng nó có tham chiếu đến các tệp JavaScript, như được hiển thị bên dưới

1
2
3
4  
5  GettingStarted
6  
7  
8  
9
10
11  
12 
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23

Bạn sẽ nhận thấy rằng có hai phiên bản của mỗi tệp

• es2015
• es5

main.js có mã ứng dụng trong đó.

thực hiện chính. mã js

Mã bên trong tệp ____29_______ là điểm nhập cho ứng dụng. Tệp này nhập mô-đun ____31_______ từ thư viện @angular/platform-browser-dynamic . ______31_______ là mô-đun chịu trách nhiệm tải ứng dụng Angular trong trình duyệt máy tính để bàn. Tương tự như mô-đun này, mô-đun ____34_______ tải ứng dụng trên thiết bị di động. Angular đủ linh hoạt để chạy trong trình duyệt, máy chủ, công nhân web hoặc thiết bị di động.

Khi

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

Mã cho hàm ____1_______2 như sau.

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

Bạn sẽ nhận thấy rằng

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1function compileNgModuleFactory[
2  injector: Injector,
3  options: CompilerOptions,
4  moduleType: Type
5  ]: Promise {
6  
7  const compilerFactory: CompilerFactory = injector.get[CompilerFactory];
8  const compiler = compilerFactory.createCompiler[[options]];
9  return compiler.compileModuleAsync[moduleType];
10}

Đầu tiên, nó truy xuất một thể hiện của

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

Bạn sẽ nhận thấy rằng nó đang tải tất cả siêu dữ liệu mô-đun, chỉ thị và đường dẫn. Sau đó, nó biên dịch tất cả các thành phần. Trong quá trình biên dịch các thành phần, nó sẽ tìm kiếm tất cả siêu dữ liệu thành phần đã đăng ký trong ứng dụng và yêu cầu trình biên dịch biên dịch tất cả các mẫu thành phần ở một nơi. Điều cuối cùng nó làm là thực sự biên dịch mô-đun cấp ứng dụng. Ở giai đoạn này, Angular giải quyết tất cả các siêu dữ liệu cần thiết cho mô-đun và trả về nhà máy sản xuất mô-đun

Trước khi khởi động ứng dụng Angular, platformBrowserDynamic cần tạo thư mục gốc

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

Khi quá trình tạo gốc ____1_______9 hoàn tất, platformBrowserDynamic instantiates the app-level module through the root module factory created as a result of the module compilation step.

Mọi ứng dụng Angular đều có ít nhất một mô-đun. Mô-đun được tải đầu tiên khi ứng dụng được tải được gọi là mô-đun cấp ứng dụng hoặc mô-đun gốc. ______31_______ khởi động mô-đun cấp ứng dụng bằng cách gọi hàm

1bootstrapModule[moduleType: Type, options: CompilerOptions]: Promise {
2    
3  return compileNgModuleFactory[this.injector, options, moduleType]
4    .then[[moduleFactory: NgModuleFactory] => {
5  
6      // ...
7    }];
8}

Tải mô-đun cấp ứng dụng

Mô-đun cấp ứng dụng hoặc mô-đun gốc có một thành phần cấp ứng dụng hoặc thành phần gốc. Thành phần cấp ứng dụng hoặc thành phần gốc này được tải khi các mô-đun cấp ứng dụng được tải bởi Angular. Ngoài thành phần cấp ứng dụng, mô-đun này còn có tham chiếu đến tất cả các mô-đun bên ngoài được nhập bằng cách sử dụng mảng ______7_______7 . Mô-đun này cũng có tham chiếu đến tất cả các dịch vụ cần được tải dưới dạng đơn lẻ và sẽ khả dụng trên ứng dụng.

Thuộc tính

1function compileNgModuleFactory[
2  injector: Injector,
3  options: CompilerOptions,
4  moduleType: Type
5  ]: Promise {
6  
7  const compilerFactory: CompilerFactory = injector.get[CompilerFactory];
8  const compiler = compilerFactory.createCompiler[[options]];
9  return compiler.compileModuleAsync[moduleType];
10}

1function compileNgModuleFactory[
2  injector: Injector,
3  options: CompilerOptions,
4  moduleType: Type
5  ]: Promise {
6  
7  const compilerFactory: CompilerFactory = injector.get[CompilerFactory];
8  const compiler = compilerFactory.createCompiler[[options]];
9  return compiler.compileModuleAsync[moduleType];
10}

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

Tải thành phần cấp ứng dụng

Lớp TypeScript của thành phần cấp ứng dụng, được gọi là

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

• bộ chọn
• mẫuURL
• phong cáchUrl

Nếu bạn đang đưa một dịch vụ vào thành phần này, thì bạn cũng sẽ có một thuộc tính thứ tư, tham chiếu đến dịch vụ sẽ được đưa vào hàm tạo của lớp này. Thuộc tính thứ tư được gọi là ____11_______4 . Nó là một mảng các lớp dịch vụ sẽ được đưa vào thành phần này.

Mẫu quy trình

Thuộc tính

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

Sau khi platformBrowserDynamic hoàn tất mọi bước chuẩn bị, nó sẵn sàng khởi tạo thành phần cấp ứng dụng hoặc thành phần gốc. ______31_______ sau đó chỉ cần lặp qua mảng thành phần bootstrap và yêu cầu

1export class JitCompiler {
2  
3  private compileModuleAsync[moduleType: Type]: Promise {
4  
5    return this._loadModules[moduleType]
6      .then[[] => {
7        this._compileComponents[moduleType];
8        return this._compileModule[moduleType];
9      }];
10  }
11}

Phần kết luận

Xin chúc mừng. Bạn đã tìm hiểu về nội bộ quy trình bootstrap của Angular. Để biết thêm thông tin, vui lòng tham khảo bootstrapping trong Angular

Bootstrap có tốt với Angular không?

Làm cách nào để sử dụng Bootstrap với Angular?

Chúng ta có thể sử dụng Bootstrap trong Angular JS không?

Tôi có nên sử dụng Bootstrap hoặc tài liệu với Angular không?