angular2网页前端执行流程

示例代码版本: http://192.168.102.9/jas-paas/cloudlink-front-framework/tree/045f4811da782c107eca72f9bdea39ebaa086a7d


命令行运行命令启动服务

  1. 在开发环境下,打开项目目录,运行命令npm start,
  2. 这个命令会进入package.json文件中:
# package.json
"scripts": {"start": "npm run server:dev",   # 这个就是 npm start 命令执行的脚本,这个脚本指向了下面的脚本"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",# 这里最终是执行了webpack的打包
}
  1. webpack的执行顺序:
# angular2官方网站关于webpack的介绍文档
# https://angular.cn/docs/ts/latest/guide/webpack.html# 首先进入./webpack.config.js文件里面,
case 'dev':case 'development':default:module.exports = require('./config/webpack.dev')({env: 'development'}); # 开发环境,进入这个文件路径# config/webpack.dev.js
# 在这个文件中还有打包好多输入文件路径以及规则,还有启动后的网址端口,链接的API地址
const commonConfig = require('./webpack.common.js');   # 这个文件引入了打包的文件入口
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';   # 访问地址
const PORT = process.env.PORT || 3000;          # 访问端口号
# 开发环境下的API链接设置
proxy: {'/cloudlink/v1/**': {target: 'http://192.168.100.90:8050',: false,pathRewrite: { '^/cloudlink/v1': '' }}}# config/webpack.common.js  在这里,有打包文件的入口以及一些规则,想要知道什么意思看angular2官方网站关于webpack的介绍。
entry: {'polyfills': './src/polyfills.browser.ts','vendor': './src/vendor.browser.ts','main': './src/main.browser.ts'                 # 这里就是程序的入口},



  • 浏览器输入地址: http://localhost:3000/

  • 入口: index.html

文件路径: cloudlink-front-framework/src/index.html

# line: 27 
<body><app>     这里是应用标签。程序入口</app>

文件路径: cloudlink-front-framework/src/app/app.module.ts

# line: 15 
import { App } from './app.component';  # 这里加载组件,包括模板(网页html)# line: 49 
routing # 加载路由

文件路径: cloudlink-front-framework/src/app/app.component.ts

# line:25
template: `<main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun><div class="additional-bg"></div><router-outlet></router-outlet>      # 这里是路由文件里面的内容,执行到这里去找路由</main>`,

文件路径: cloudlink-front-framework/src/app/app.routing.ts

# line:5
{ path: '', redirectTo: 'cloudlink', pathMatch: 'full' }, 
# 由于什么也没输入,所以默认进入这个空的
# 这里给默认的添加了一个路径 ‘cloudlink’
# 此时进入下个组件中
{ path: 'demo', redirectTo: 'demo/dashboard' },
{ path: '**', redirectTo: 'cloudlink/dashboard' }

文件路径: cloudlink-front-framework/src/app/core/home/home.module.ts

import { routing } from './home.routing';             # 加载自己的路由
import { NgaModule } from '../../theme/nga.module';   # 加载菜单模块
import { HomeComponent } from './home.component';     # 加载组件,这里有执行,有网页,

文件路径: cloudlink-front-framework/src/app/core/home/home.component.ts

# line:31
template: `<ba-sidebar></ba-sidebar>    # 自定义标签 这里是垂直导航菜单# src/app/theme/components/baSidebar/baSidebar.component.ts# line:8 : selector: 'ba-sidebar',# src/app/theme/components/baSidebar/baSidebar.html# line: 11 : <menuItem [menu]='menu'></menuItem>     # 自定义标签,这里负责列表垂直菜单选项# src/app/theme/components/menuItem/menuItem.component.ts# line: 6: selector: 'menuItem',# src/app/theme/components/menuItem/menuItem.component.html  # 在这里从后台API查询后,列出菜单。<ba-page-top></ba-page-top>   #自定义标签 这里是网页顶部header菜单,如退出按钮菜单# src/app/theme/components/baPageTop/baPageTop.component.ts# line:8 : selector: 'ba-page-top',<div class="al-main"><div class="al-content"> <router-outlet></router-outlet>      # 这里加载路由</div></div><ba-back-top position="200"></ba-back-top>`

文件路径: src/app/core/home/home.routing.ts

# line:6
const routes: Routes = [{path: 'login',loadChildren: () => System.import('../login/login.module')             # 这里是登录},{path: 'register',loadChildren: () => System.import('../register/register.module')},{path: 'cloudlink',   # 匹配这里component: HomeComponent,children: [{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },         # 这里匹配空,并且加上了‘dashboard’{ path: 'jas', loadChildren: () => System.import('../../jasframework/jas/jas.module.ts'), canLoad: [AuthGuard] },{ path: 'dashboard', loadChildren: () => System.import('../dashboard/dashboard.module'), canLoad: [AuthGuard] },

文件路径: src/app/core/dashboard/dashboard.module.ts
文件路径: src/app/core/dashboard/dashboard.component.ts
文件路径: src/app/core/dashboard/dashboard.html
这里没有什么,正常显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cve_2014_3120-Elasticsearch-rce-vulfocus靶场

1.背景 来源&#xff1a;ElasticSearch&#xff08;CVE-2014-3120&#xff09;命令执行漏洞复现_mvel 漏洞-CSDN博客 参考&#xff1a;https://www.cnblogs.com/huangxiaosan/p/14398307.html 老版本ElasticSearch支持传入动态脚本&#xff08;MVEL&#xff09;来执行一些复…

Windows11上安装docker(WSL2后端)和使用docker安装MySQL和达梦数据库

Windows11上安装docker&#xff08;WSL2后端&#xff09;和使用docker安装MySQL和达梦数据库 1. 操作系统环境2. 首先安装wsl2.1 关于wsl2.2 安装wsl2.3 查看可用的wsl2.4 安装ubuntu-22.042.5 查看、启动ubuntu-22.04应用2.6 上面安装开了daili2.7 wsl的更多参考 3. 下载Docke…

Springboot 开发之任务调度框架(一)Quartz 简介

一、引言 常见的定时任务框架有 Quartz、elastic-job、xxl-job等等&#xff0c;本文主要介绍 Spirng Boot 集成 Quartz 定时任务框架。 二、Quartz 简介 Quartz 是一个功能强大且灵活的开源作业调度库&#xff0c;广泛用于 Java 应用中。它允许开发者创建复杂的调度任务&…

【Jenkins+K8s】持续集成与交付 (二十):K8s集群通过Deployment方式部署安装Jenkins

🟣【Jenkins+K8s】持续集成与交付 (二十):K8s集群通过Deployment方式部署安装Jenkins 一、 准备工作二、安装 Jenkins2.1 设置NFS共享目录2.2 创建名称空间2.3 创建持久化卷和声明2.4 创建sa账号2.5 对sa账号授权2.6 通过Deployment方式部署Jenkins2.7 查看Jenkins是否创建…

AdroitFisherman模块测试日志(2024/6/10)

测试内容 测试AdroitFisherman分发包中SHAUtil模块。 测试用具 Django5.0.3框架&#xff0c;AdroitFisherman0.0.31 项目结构 路由设置 总路由 from django.contrib import admin from django.urls import path,include from Base64Util import urls urlpatterns [path(ad…

SCRM的全面了解

一、什么是SCRM SCRM&#xff08;Social CRM&#xff0c;社会化客户关系管理&#xff09;&#xff0c;是以用户为中心&#xff0c;通过社交平台与用户建立联系&#xff0c;以内容、活动、客服、商城等服务吸引用户注意力&#xff0c;并不断与用户产生互动&#xff0c;实现用户…

【Oracle篇】rman时间点异机恢复:从RAC环境到单机测试环境的转移(第六篇,总共八篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

谷歌AI助力软件工程的进展及未来展望

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

OpenAI 宕机事件:GPT 停摆的影响与应对

引言 2024年6月4日&#xff0c;OpenAI 的 GPT 模型发生了一次全球性的宕机&#xff0c;持续时间长达8小时。此次宕机不仅影响了OpenAI自家的服务&#xff0c;还导致大量用户涌向竞争对手平台&#xff0c;如Claude和Gemini&#xff0c;结果也导致这些平台出现故障。这次事件的广…

lua网站开发中如何制作自定义模块

自定义模块是FastWeb框架的重要拓展功能&#xff0c;用来扩展和增强服务的能力。通过自定义模块&#xff0c;开发者可以轻松添加特定的功能和特性&#xff0c;使得网站开发更加灵活和高效。本文将演示如何添加自己的模块作为FastWeb的拓展&#xff0c;为框架的壮大与支持提供重…

在 Word 中,如何有效调整文字与下划线之间的距离

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 如果你在使用 Word 时&#xff0c;希望调整文字和下划线之间的距离&#xff0c;让它们看起来更加美观&#xff0c;可以按照以下步骤操作&#xff1a; 1. 在你想要加下划线的文字前后各加一个空格&…

c++【入门】米老鼠偷糖果

限制 时间限制 : 1 秒 内存限制 : 128 MB 题目 米老鼠发现了厨房放了n颗糖果&#xff0c;它一次可以背走a颗&#xff0c;请问米老鼠背了x次之后还剩多少颗&#xff1f;&#xff08;假设x次之后一定有糖果剩下&#xff09; 输入 三个整数n、a、x分别代表总共有n颗糖果&…

在windows10 安装子系统linux(WSL安装方式)

在 windows 10 平台采用了WSL安装方式安装linux子系统 1 查找自己想要安装的linux子系统 wsl --list --online 2 在线安装 个人用Debian比较多&#xff0c;这里选择Debian&#xff0c;如下图&#xff1a; wsl --install -d Debian 安装过程中有一步要求输入用户名与密码&…

使用Vue CLI在其他磁盘创建项目出现错误及解决

Vue CLI是Vue.js官方推出的脚手架工具&#xff0c;可以帮我们快速的创建Vue项目框架。 我们创建Vue项目时一般默认都是在C盘&#xff0c;但由于某些因素我们需要在其他磁盘上创建Vue项目。 通过“winr”打开终端时默认位置都是C盘&#xff0c;但是Vue CLI不接受绝对路径作为参…

802.11漫游流程简单解析与笔记_Part3

原定计划在Part3分析ns3的Roaming流程抓包&#xff0c;但ns3并不支持漫游&#xff1a; 看过Part1的应该都知道&#xff0c;标准关联流程是auth*2 associate*2 key*4&#xff0c;但ns3里面没有与auth有关的部分&#xff0c;third脚本里面有cap字段&#xff0c;但无auth也无key&a…

LabVIEW图像采集处理项目中相机选择与应用

在LabVIEW图像采集处理项目中&#xff0c;选择合适的相机是确保项目成功的关键。本文将详细探讨相机选择时需要关注的参数、黑白相机与彩色相机的区别及其适用场合&#xff0c;帮助工程师和开发者做出明智的选择。 相机选择时需要关注的参数 1. 分辨率 定义&#xff1a;分辨率…

HDFS 读写数据流程

优质博文&#xff1a;IT-BLOG-CN 一、HDFS 写数据流程 HDFS 文件写入流程图如下&#xff1a;三个模块&#xff08;客户端、NameNode、DataNode&#xff09; 【1】校验&#xff1a; 客户端通过 DistributedFileSystem 模块向 NameNode 请求上传文件&#xff0c;NameNode 会检…

视频点播系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;客服聊天管理&#xff0c;基础数据管理&#xff0c;论坛管理&#xff0c;公告管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#xff0c;视…

6.8 c语言

6.2 格式输出函数 格式控制符&#xff0c;输出表(输出对象) %e:指数形式浮点小数 m :输出数据域宽&#xff0c;数据长度<m,左补空格&#xff1b;否则按实际输出 .n:对字符串&#xff0c;指定实际输出位数 #include <stdio.h> int main() {char a[] "hello,wor…

【代码随想录训练营】【Day 45】【动态规划-5】| Leetcode 1049, 494, 474

【代码随想录训练营】【Day 45】【动态规划-5】| Leetcode 1049, 494, 474 需强化知识点 题目 1049. 最后一块石头的重量 II 代码随想录思路&#xff1a;尽量让石头分成重量相同的两堆&#xff0c;相撞之后剩下的石头最小&#xff0c;这样就化解成01背包问题了为什么两两单…