angular2网页前端执行流程


命令行运行命令启动服务

  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的打包

    }

  3. 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' # 这里就是程序的入口
    },




文件路径: 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

这里没有什么,正常显示。

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站