前端项目

启动流程

  1. 页面载入之后,引入的脚本是 boot.js,由 es2015 的 shim,systemjs,systemjs 的配置文件和 boot.js 组成。
  2. 执行 boot。设定 cache 时间,import app/app.js,执行 init 函数。
  3. init 过程,生成 GrafanaAPP。
    1. 从 app/core/config 引入配置参数,实际配置参数是 app/core/settings.js
    2. 定义依赖,ngModuleDependencies(第三方模块),核心模块 app/core/core(controller, directive…),功能模块(’app/features/all’)
    3. Systemjs 加载所有功能模块之后,向模块里注入providers。
  4. angular app 的初始设置由后端直接渲染到页面中,页面文件 public/views/index.html,参数是 window.grafanaBootData
  5. app 启动时会自动加载所有在 app/featrures/all.js 中声明过的模块,所以如果有新的功能模块,确保它最终在该文件中声明了。

开发说明

  1. app/core/utils/kbn.js 是各类格式化函数。
  2. 如何定义模块
    1. typescript 编写的模块按照 ES2015 的模块化语法编写。
    2. JavaScript 编写的模块按照 AMD 格式定义。依赖会自动注入。root 目录是 public。
  3. 引入新的第三方模块。
    1. 可以直接放入 public 下的 vendor 目录,然后在 app/system.conf.js 中加入定义,之后可以直接通过模块名加载。
  4. 如果是 angular 的模块,在 app/app.ts 中的 ngModuleDependencies 数组中加入模块名来加载它。

数据

  1. dashboard controller 初始化完成之后,会通过 dashboardSrv 创建新的 dashboard 数据对象,然后在 dashboard_ctrl 的 setupDashboardInternal 方法中初始化各个注册的模块。
  2. 如果你添加了新的功能模块,需要依赖 dashboard 数据,可以在 dashboard_ctrl 中注入 service 方法,然后在 setupDashboardInternal 进行 init 动作。
  3. 所有需要持久化的数据都挂载在 dashboard 数据对象下,如果有新的需要持久化的数据,可以挂载在 dashboard 数据对象下,注意避免 key 的冲突。每次用户保存 dashboard 的时候,dashboard 数据对象就会提交到后端保存。

标签: grafana

添加新评论