Angular笔记02--项目启动

最新推荐文章于 2024-03-13 14:53:20 发布

*MaybE

最新推荐文章于 2024-03-13 14:53:20 发布

阅读量295

点赞数

分类专栏： Angular笔记

本文链接：https://blog.csdn.net/weixin_43903745/article/details/106473936

版权

Angular笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Angular笔记--02

- 启动的相关文件
- Angular的完整启动过程

启动的相关文件

上次的笔记中我们学习了angular.json是angular cli的配置文件，main.ts是angular项目主入口，现在看看具体是如何一步步启动一个项目的。

首先打开angular.json文件（不知道的可以参考上篇博客）
在这里插入图片描述
我们找到"sourceRoot": "src",这行代码表示angular应用启动时从哪个目录找资源,默认指向src目录
我们再看"index": "src/index.html",这行代码表示Angular应用启动时加载的页面默认指向src目录中index.html
继续看"main": "src/main.ts",这行代码表示Angular应用启动时加载的脚本默认指向src目录中的main.ts

在main.ts文件中有以下代码，表示程序启动时会去加载AppModule

const bootstrap = () => {
  return platformBrowserDynamic()
    .bootstrapModule(AppModule, {
      defaultEncapsulation: ViewEncapsulation.Emulated,
    })
    .then(res => {
      if ((window as any).appBootstrap) {
        (window as any).appBootstrap();
      }
      return res;
    });
};

在index.html中<app-root></app-root> 这个标签就是组件展示的地方

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</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>Loading...</app-root>
</body>
</html>

Angular的完整启动过程

1.首先Angular应用在启动时会去angular.json中寻找要加载的页面和脚本。
默认加载的时index.html与main.ts，启动时在src目录中寻找资源在这里插入图片描述
2.在main.ts中寻找主模块

3.在app.module中找到指定的主组件，默认的主组件是app.component

4.最后就是将组件渲染到index.html

以上是我学习过程中的记录，如有不对的地方还望网友指出。

*MaybE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular笔记02--项目启动

Angular笔记--02启动的相关文件Angular的完整启动过程启动的相关文件上次的笔记中我们学习了angular.json是angular cli的配置文件，main.ts是angular项目主入口，现在看看具体是如何一步步启动一个项目的。首先打开angular.json文件（不知道的可以参考上篇博客）我们找到"sourceRoot": "src",这行代码表示angular应用启动时从哪个目录找资源,默认指向src目录我们再看"index": "src/index.html",这行代码表示
复制链接

扫一扫

专栏目录