zoukankan      html  css  js  c++  java
  • Angular总结二:Angular 启动过程

    要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事?

    通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组

    这个对象中有 root 这个属性,这个是 Angular 应用的根目录,也即是 src 目录是 Angular 应用的根目录

    这个对象中有 index 这个属性,这个是 Angular 启动时加载的页面,也即是 src 目录下的 index.html 是 Angular 启动时加载的页面

    这个对象中有 main 这个属性,这个是 Angular 启动时加载的脚本,也既是 src 目录下的 main.ts 是 Angular 启动时加载的脚本。负责引导 Angular 的启动。

    main.ts 文件内容如下

    1. 引入 enableProdMode 模块,可以通过这个方法来关闭 Angular 的开发者模式,if(environment.production){enableProdMode();}如果为生产环境则关闭开发者模式,

    2. Angular 导入 platformBrowserDynamic 模块来启动这个应用,

    3. 导入命令行工具生成的整个应用的主模块 AppModule,

    4. 导入环境配置文件 environment, 通过该目录下的 environment.prod.ts 配置文件配置生产环境,通过 environment.ts 文件来配置开发环境,还可以自定义测试环境,如 environment.test.ts

    Angular 通过 AppModule 模块来启动应用,并加载该模块需要的子模块

    app.module.ts 内容如下:

    1. 向外暴露了一个 AppModule 类。

    2. 使用 NgModule 装饰器生命了一个模块

    3. declarations 申明模块中有什么东西,该申明中只能声明组件、指令、管道

    4. imports 申明要让应用正常运转还需要什么东西,因为程序要运行在浏览器中,所以 BrowserModule 模块是必须要的。

    5. providers 申明模块中需要用到的服务

    6. bootstrap 属性申明了主组件

    Angular 应用在加载时,会加载 AppModule 模块以及该模块所依赖的所有子模块。

    为了弄明白加载的页面,分析 app.comonment.ts 这个组件:

    1. 从 angular 核心模块中引入 Component 组件模块,

    2. 在元数据装饰器中指明了选择器 app-root ,模板 app.comonent.html,样式 app.component.css,

    3. 在 AppComponent 类中,定义了 title 属性,并为其赋值。

    在 index.html 中

    <app-root></app-root> 这里的内容将会被替换,替换内容为选择器为 app-root 的模板内容,既是 app.component.html  的内容:

    1. 该模板中,{{title}} 是插值表达式,被其控制器的类的属性 title 值替换为 “app”。

    于是,启动 Angular 应用并在浏览器中查看时,先显示“欢迎...”,随后被替换为 app.component.html 的内容:

  • 相关阅读:
    2429: [HAOI2006]聪明的猴子
    1789: [Ahoi2008]Necklace Y型项链
    3399: [Usaco2009 Mar]Sand Castle城堡
    3713: [PA2014]Iloczyn
    1907: 树的路径覆盖
    2751: [HAOI2012]容易题(easy)
    算法模板——计算几何2(二维凸包——Andrew算法)
    算法模板——splay区间反转 2
    算法模板——Dinic网络最大流 2
    算法模板——Dinic最小费用最大流
  • 原文地址:https://www.cnblogs.com/xinjie-just/p/8446402.html
Copyright © 2011-2022 走看看