前端项目

启动流程

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 数据对象就会提交到后端保存。