【Angular】-启动Angular应用

我们以三个问题为导向来理解Angular的启动!
1、启动时加载了哪个页面?
2、启动时加载了哪些脚本?
3、这些脚本做了什么事?


启动时加载了哪个页面?加载了哪些脚本?

首先我们先打开angular-cli.json文件,代码如下:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],

里边有一个apps数组,数组中有一个index属性和一个main属性;
index属性指向src文件中的index.html文件,这是angular启动时加载的页面。
main属性指向src文件中的main.ts文件,这是angular启动时加载的脚本,负责引导angular启动。

这些脚本做了什么事?

接着我们打开main.ts脚本文件

'./加载一些模块'
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

'./设置环境'
if (environment.production) {
  enableProdMode();
}

'./传入AppModule,作为启动模块'
platformBrowserDynamic().bootstrapModule(AppModule);

在main.ts文件中加载了一些模块,设置了环境,然后将AppModule作为启动模块;接下会分析AppModule模块中需要依赖哪些模块,并加载哪些模块;
然后会分析这些模块需要哪些模块,以此类推,直到加载完所有需要依赖的模块。
然后augular会在index.html中寻找app-root,找到这个组件后,会用足组件(app.component.ts)中指定的模版内容(app.component.html)中的内容替换app-root中的内容。

index.html文件中的代码:
这里写图片描述
app.component.ts文件中代码:
这里写图片描述

启动后的实际效果如下

这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ldb987/article/details/79952498
文章标签: Angular启动
个人分类: ----------Angular
上一篇Winform中用bindingNavigator和bingdingSource实现分页
下一篇【J2EE】-JDBC
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭