乐趣区

关于前端:Angular-应用里-indexhtml-的作用

jiezi

index.html 位于应用程序的 src 文件夹中。编译器在此文件的 开端 动静增加所有 javascript 文件。

因为当初所有组件都是已知的，因而 html 文件调用根组件即 app-root。根组件在 app.components.ts 中定义，它以 app.component.html 为指标。

这是 index.html 文件在 Visual Studio Code 环境中的样子：

<!doctype html>
 <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>My Hello World App!</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>

选择器 app-root 对应的 Component 源代码：

import {Component} from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'hello-world';}

当在浏览器中提供并关上这个 Angular 应用程序时，脚本注入由编译器实现，这就是文件在浏览器中的样子：

其中黄色高亮区域是编辑器动静注入的。

上述代码的 vendor.js: 在幕后，Angular CLI 应用 Webpack，一个模块打包器。除此之外，Webpack（在许多插件的帮忙下）将我的项目代码和资产转换为 JavaScript 包。这些包蕴含应用程序的所有代码，以及第三方代码（例如 Angular 和应用程序可能应用的其余库）。

当应用 ng build --prod 构建利用时，还会生成如下 artifacts：

包名称后的看似随机的字符串是哈希值，增加在此处是为了革除缓存。也就是说，确保 Web 浏览器应用更新后的内容，而不是之前在本地存储的版本。通常，如果应用程序的内容没有扭转，那么即便屡次构建，这些 hash 字符串也将放弃不变。

  • main.js：利用程序代码和开发人员导入的所有内容
  • vendor.js：利用依赖的第三方代码
  • polyfills.js：容许在旧环境中应用新性能的 polyfill（例如，在过期的 Web 浏览器上应用 Angular）
  • runtime.js：Webpack 用于在运行时加载代码的实用程序代码
退出移动版