启动Angular应用

原创 2018年04月15日 20:04:20

我们以三个问题为导向来理解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 App应用的启动方式 自动启动 手动启动的原理及注意 1、angular的启动是默认检测dom元素是否ng-app属性,如果有ng-app属性,则立即执行angular.bootstr...
  • jl244981288
  • jl244981288
  • 2016-05-25 11:58:00
  • 1775

angular-模块-启动

1.模块 在angularjs中,模块是定义应用的最主要方式。 1.1 声明模块 angular.module(name,requires); ● name:模块的名称,字符串变量 ● requi...
  • sushans
  • sushans
  • 2016-05-25 11:27:41
  • 657

在Angular应用启动前获取数据并注入到应用中

在Angular应用启动前获取数据并注入到应用中在部分业务场景下,我们在启动客户端Angular应用时,可能需要将一些数据注入到Angular应用中,比如:配置文件信息-让应用根据不同的配置信息进行初...
  • shenlei19911210
  • shenlei19911210
  • 2017-03-20 11:19:23
  • 692

Angular 2 应用启动过程简单分析

链接:Angular 2 应用启动过程简单分析
  • SitHome
  • SitHome
  • 2017-02-11 11:19:22
  • 952

Angular4 Http

  • 2017年08月10日 06:39
  • 80KB
  • 下载

在 nginx 中部署 angular 应用

最近使用Angular做了第一个应用,但是网上的教程大多是教如何开发,部署相对较少,所以这里就简单记录一下如何在nginx中部署Angular应用。 注:Angular应用可以编译成静态页面,然后...
  • t894690230
  • t894690230
  • 2017-10-15 22:19:18
  • 2372

【Angular】——创建启动Angular

创建angular2项目     直接在命令提示符中输入:     ng new helloworld     为什么终止:此时angular2的基本文件已经全部创建,接下来是下载项目所依赖的n...
  • u012654963
  • u012654963
  • 2017-05-14 21:27:56
  • 2322

angular启动

1.js/app.js angular .module('app',['ionic','ngCordova','ionic-citypicker','ui.sortable', // 其...
  • sixteen_cicle
  • sixteen_cicle
  • 2017-04-24 11:40:43
  • 222

Angular启动过程介绍

1、启动时加载了哪个页面? 2、启动时加载了哪些脚本? 3、这些脚本做了什么事? 打开Angular的命令行文件.angular-cli.json。apps节点下面。 首先加载 index.htm...
  • zengmingen
  • zengmingen
  • 2017-06-14 19:49:09
  • 394

AngularJS实际项目应用——程序入口启动

一步一步看程序怎么启动的,angularjs是单页应用,基本就一个页面,页面主要结构如下: 页面最下面引入requirejs 真正的程序启动点在config-p...
  • kittyjie
  • kittyjie
  • 2017-02-16 15:12:37
  • 3949
收藏助手
不良信息举报
您举报文章:启动Angular应用
举报原因:
原因补充:

(最多只允许输入30个字)