angular应用启动过程

最新推荐文章于 2024-08-25 21:04:45 发布
最新推荐文章于 2024-08-25 21:04:45 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superjunjin/article/details/81702972
版权
本文详细介绍了Angular应用的启动过程，从找到启动文件index.html和main.ts开始，接着在main.ts中启动主模块AppModule，然后在AppModule中加载其他模块，最后加载index.html并寻找主组件对应的css选择器。
摘要由CSDN通过智能技术生成

一，找到启动文件

在项目的angular文件中，找到启动的页面和脚本文件

这里写图片描述

图中则分别是index.html和main.ts文件

二，主脚本启动主模块

这里写图片描述

在主脚本main.ts文件中启动主模块AppModule

三，主模块文件中加载其他模块（直到模块都加载好）

主模块文件src/app/app.module.ts
这里写图片描述

去加载红框中的模块

四，加载index.html(app-root)

加载index.html，寻找主模块（启动模块）AppModule主组件bootstrap: [AppComponent]对应的css选择器app-root

这里写图片描述

这里写图片描述

最低0.47元/天 解锁文章
superjunjin
关注
专栏目录
Angular 启动过程简析
技术玄关
04-09 840
引言 这篇文章简要介绍一下Angular应用程序的启动（Bootstrap）原理。这里的内容来源于网上的一些关于Angular的学习资料，只会涉及基本的原理和过程，不会涉及过于细节的源代码，感兴趣的话大家可以自己研究源代码。 目前的Angular的大版本是8，即将发布Angular 9，这篇文章是基于Angular 8的。 我们在开始学习Angular并动手做一些练习时，可能会好奇，一个简单的 ...
nice:angular 移动 ui 启动应用程序
06-04
"nice:angular 移动 UI 启动应用程序" 这个标题指出，我们关注的是一个与 Angular 框架相关的项目，它特别针对移动设备的用户界面设计。"nice" 可能是项目的名称或者代表某种特性，如 "Nice UI" 或者 "优秀体验" 的...
Angular的启动过程
喻志强的博客
05-05 1万+
Angular项目的启动过程
Angular快速入门
最新发布
m0_52566365的博客
08-25 1109
简单记录了一下angular各个特性的使用，方便后续快速查阅。
Angular启动过程介绍
松门一枝花
06-14 1192
1、启动时加载了哪个页面？ 2、启动时加载了哪些脚本？ 3、这些脚本做了什么事？ 打开Angular的命令行文件.angular-cli.json。apps节点下面。 首先加载 index.html 页面。 此时浏览器显示index.html的内容。 再加载main.ts脚本 "apps": [ { ......... "index": "index.ht
angular 启动过程
四分之一工程师的博客
03-19 400
NgModule 用于描述应用的各个部分如何组织在一起。 每个应用又至少一个 Angular 模块，根模块就是你用来启动此应用的模块。 按照惯例，它通常命名为 AppModule。如果你使用 CLI 来生成一个应用，其默认的 AppModule 是这样的：import { BrowserModule } from '@angular/platform-browser'; import { NgMo...
详解为生产环境编译Angular2应用的方法
10-17
例如，一个简单的HelloAngular应用就可能产生40个HTTP请求，并且加载了1.8MB的脚本。显然，这种状况并不适合生产环境，尤其是在移动设备上，如此庞大的资源请求可能会导致页面加载缓慢，影响用户体验。 要优化...
angular-starter-kit:用于引导Angular应用程序的Angular Starter Kit
05-05
这是用于引导Angular应用程序的Angular入门工具包。 安装此套件的过程是在终端中键入以下命令： 运行“ npm install”。 运行“ bower安装”。 运行“ gulp”以启动服务器。 运行“ gulp build”以将应用程序...
angular项目的启动流程
weixin_40969472的博客
12-20 897
背景： 项目启动前准备  1、跨域文件【重要】 --disable-web-security --allow-file-access-from-files --js-flag="--expose-gc" --enable-spatial-navigation --disable-web-security --user-data-dir  2、启动服务 1>VSPEmulator\set
Angular入门-启动过程
半斤米粉闯天下的博客
09-25 1569
分析启动过程无非就是两件事： 加载了哪个启动页面和脚本 启动脚本干了什么事 下面分步骤进行记录。 加载了哪个启动页面和脚本 在执行npm start命令之后会首先读取package.json文件，寻找其中关于start命令的定义，如下所示 找到之后便会执行start中的语句进行启动，也就是说npm start命令和执行ng serve --proxy-config proxy.conf....
angular 启动流程
weixin_42594427的博客
01-10 531
angular 应用的启动流程如下： 当浏览器加载 index.html 文件时，会解析 html 中的 angular 应用的根元素，并在该元素上安装 angular 应用。 angular 应用会读取应用的根模块，并根据根模块中定义的组件来渲染应用的内容。 当用户与应用交互时，angular 会检测组件中的输入属性和输出属性，并响应用户的操作。 希望这对你有帮助！ ...
Angular启动应用过程
Smily-王婷婷
03-11 567
目录 结构： 　　上一篇博客中，已经搭建好了Angular环境，创建好了目录文件夹，具体每个文件夹的作用，有没有很好奇呢，现在就让小编带你们去了解一下吧； 　　 e2e:端到端的测试； node_modules:第三方模块库； src:项目中所有文件存放在这个 -app:组件以及app.modules.ts定义跟模块； -assets:静态资源 -environments...
angularJS项目前端后端分离，IDEA中开发部署
大丁的博客
12-08 7480
用angular-cli代理配置来解决跨域请求问题
安装angularjs及idea导入angularjs项目
威的博客
09-14 1197
在已安装好npm，cnpm情况下使用 先安装@angular/cli //安装执行命令 cnpm i -g @angular/cli --save-dev cmd控制台输入选择你要创建的路径 C:\Users\xyang>cd G:\project\angularui C:\Users\xyang>g: G:\project\angularui> 创建angular项目 ng new agraui //通过key选择一个css样式 卡住不动了按两下ctrl +c，停止运行
Angular开发之——Angular项目介绍(03)
我的博客
05-13 983
Angular项目目录介绍Angular程序如何启动morenode_modules ：第三方依赖包存放的目录src：应用源代码目录angular-cli.json： Angular命令行工具的配置文件，后期可能会去修改它，引一些其他的第三方包，比如jquerypackage.json：这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新项目的时候，等了半天就是在下载第三方依赖包。
Angular项目启动步骤
csdn122325735的专栏
06-10 7427
初学者启动angular 项目
angular项目从部署到启动
热门推荐
阿留申低压的博客
05-02 3万+
angular是前端三大框架之一，适合开发大型需要多人合作的项目，代码规范，社区活跃，不过学习曲线陡峭。这篇介绍环境搭建，完成就可以启动ng项目了。 一、Node.js和npm 在node官网（https://nodejs.org/zh-cn/download/）下载安装包，根据电脑系统安装对应包。 打开安装包，直接点击下一步，完成安装。 检测Node.js...
AngularJS启动过程详解
AngularJS的启动过程涉及到多个步骤，包括初始化全局对象、设置Bootstrap机制、创建注入器，以及执行应用的编译和配置。理解这个过程对于开发、调试和优化AngularJS应用至关重要，因为它揭示了框架如何管理其内部...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值