angular4学习笔记三 angular项目的启动过程

最新推荐文章于 2020-07-28 09:14:08 发布
最新推荐文章于 2020-07-28 09:14:08 发布
阅读量350 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端菜鸟 文章标签： angular4 angular4项目启动过程 angular4项目配置启动过程 angular4项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42706227/article/details/81589709
本文介绍了一个Angular项目的启动过程，从index.html页面入口开始，通过main.ts加载主模块，然后读取index.html内的app-root标签来加载根模块及其所有依赖。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目启动过程

页面入口index.html页面——》程序入口main.ts加载主模块，此时项目启动——-》读取index.html内app-root标签，加载根模块并加载所有依赖。

项目的启动可以在angular-cli.json中进行设置，图片如下（下图为angular6项目的angular.json，它与angular4的angular-cli.json相对应）：
这里写图片描述

项目结构：
这里写图片描述

Angular 4入门教程系列：2：从HelloWorld去理解Angular程序的组成和启动
知行合一 止于至善
10-27 6544
上篇文章中我们了解到了如何使用cli创建一个项目骨架，接下来我们来学习一下这个项目骨架的组成以及Angular程序的启动过程。
How To Install And Set Up Angular 9 On Windows 10
wxg_wll的博客
07-10 463
How To Install And Set Up Angular 9 On Windows 10 On February 7th, 2020, a new version of Angular is released which is Angular 9. A lot of new features and performance improvements are introduced with this release. Here in this article, we will discuss som
angular4应用的详细启动过程
liweibo348的博客
10-05 757
1. 首先找到项目中的angular.json文件，里面有如下代码： "index": "src/index.html", "main": "src/main.ts", index指定显示的启动时显示的页面。 main指定启动时需要加载得脚本,即main.ts。   2. main.js 打开main.ts文件，发现有很多引入的类，引入用的是import关键字。主要看这句代码： ...
angular cli启动项目
神zhi殇的博客
08-24 536
使用cli1.7.3版本，cdk：5.0.0版本 cdk先放进package.json 然后再启用npm install，这样的不会报错的！ antd 0.7.0的版本放入项目中 引入antd的 css，可以正常使用了...
Node.js中环境变量process.env
燕儿归的专栏
07-13 1万+
原文地址：https://www.jb51.net/article/126838.htm这篇文章主要给大家介绍了关于Node.js中环境变量process.env的一些事，文中通过示例代码介绍的非常详细，对大家学习或者使用node.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。前言最近这两天在和运维GG搞部署项目的事儿。碰到一个问题就是，咱们的dev，uat，product...
angular4开发环境搭建以及项目启动过程
涂涂
08-13 1万+
1.安装Node.js®和npm，node官网下载安装即可 2.请先在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。 3.全局安装 Angular CLI 。 npm install -g @angular/cli 4.ng-v看安
Angular4学习笔记之新建项目的方法
08-29
在Angular4的学习过程中，创建一个新的项目是初学者的首要任务。这篇文章将详细讲解如何通过Angular CLI来完成这一过程。Angular CLI（命令行接口）是一个强大的工具，它简化了项目的搭建和开发流程。以下是你需要...
angular4学习笔记.zip
01-08
angular4学习笔记.zip encapsulation ViewChild,ViweChildren 服务 管道 模板变量# 内容投影 生命周期钩子 使用angular的插件 数据绑定 响应式编程 依赖注入DI 指令 组件间通信 路由 ...
angular4项目启动步骤
shengandshu的博客
11-22 7126
1. 安装node 官网地址：http://nodejs.cn/ 安装完成后，在命令行工具输入 node –v 可验证是否安装成功2. 配置淘宝镜像源 从国外服务器下载ng4和依赖包很慢，通过配置淘宝镜像源可以提高下载速度。 打开命令行工具输入：npm config set registry https://registry.npm.taobao.org配置完成后可通过npm c
Angular的启动过程
喻志强的博客
05-05 1万+
Angular项目的启动过程
AngularJS实际项目应用——程序入口启动
Challenge Next Challenge
02-16 8095
一步一步看程序怎么启动的，angularjs是单页应用，基本就一个页面，页面主要结构如下： 页面最下面引入requirejs 真正的程序启动点在config-product.js里 (function(window){ var appPath=window.contextPath+ '/static/js/'+(window.i
【初始angular 】angular项目创建过程中需要注意的细节
weixin_34309435的博客
02-18 537
【初始angular 】angular项目创建过程中需要注意的细节 安装angular-cli工具 yarn global add @angular/cli 当前使用版本：Angular CLI: 7.3.1如果是一些企业级项目的话，本人推荐使用的版本比最新版小一个主版本号，防止最新版的一些发现的问题 设置包管理工具为yarn ng c...
angular项目从部署到启动
热门推荐
阿留申低压的博客
05-02 3万+
angular是前端三大框架之一，适合开发大型需要多人合作的项目，代码规范，社区活跃，不过学习曲线陡峭。这篇介绍环境搭建，完成就可以启动ng项目了。 一、Node.js和npm 在node官网（https://nodejs.org/zh-cn/download/）下载安装包，根据电脑系统安装对应包。 打开安装包，直接点击下一步，完成安装。 检测Node.js...
Angular启动项目时报错
plus73的博客
07-28 1883
@Angular Angular启动项目时报错An unhandled exception occurred: Cannot find module ‘acorn’ 之前查看网上教程，教程需要引入@angular/http，初学Angular还不是很了解Angular8已经换成HttpClient，不需要引入angular/http，于是在cmd中运行了npm install @angular/http，再次使用ng s启动项目时报错An unhandled exception occurred: Cann
Angular入门系列（四） Angular中的启动入口点
Softdong 一个浪荡的程序员
09-05 2275
Angular是如何启动的 简单来说，angular启动时经历如下过程   之前我们学习可以知道，组件才是用户可以看到的东西，所以angular启动的时候就是要先知道，我应该先显示哪个组件 angular会先执行main.ts 我们可以看到main.ts代码 import { enableProdMode } from '@angular/core'; import { pl...
Angular开启之旅
当我孤单的时候还可以抱着你
10-30 728
一，安装环境 安装最新稳定版本的node.js。 二，创建项目 ng new 项目名称 Would you like to add Angular routing? Yes 选择四分安装配置路由 Which stylesheet format would you like to use? 上下键可以选择CSS预编译器 三，启动项目 在项目名称的文件夹内，使用 ng serve --...
Angular项目的启动过程
Baron
10-21 1472
大家都知道Angular有很多的优点，包括： 横跨所有平台 学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。 速度与性能 通过Web Worker和服务端渲染，达到在如今(以及未来）的Web平台上所能达到的最高速度。 Angular让你有效掌控可伸缩性。基于RxJS、Immutable.js和...
angular2.0配置同时使用localhost和本机IP访问项目
Frank_Good的专栏
01-18 3827
第一步：找到此文件“node_modules/webpack-dev-server/lib/Server.js”，按照下图修改   二、修改配置文件package.json，见下图   三、在项目下，命令行运行 npm start，启动项目。 四、现在可以用本机IP:4200或者localhost:4200访问项目
Angular4学习笔记：实现绑定和分包的实践
Angular4学习笔记之实现绑定和分包 Angular4是一种流行的前端开发框架，它提供了许多强大的功能来帮助开发者快速构建复杂的Web应用程序。在这篇文章中，我们将介绍如何在Angular4中实现绑定和分包，主要涵盖了组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值