mesos 1.3.2 web static界面代码导读1

mesos web 界面是个单页面的web 应用。

index.html

引入css 和 图标文件。

使用 data-ng-show 指令显示加载的进度条。

使用 href="#/" 指向主页

使用 “header“ 标签封装网页页眉，23-69行。

最后加载js

**

注意加载js 顺序为 app.js -> service.js -> controller.js

**

app.js

整个代码逻辑如下：

通过一个立即执行函数，先注入外部的service，再定义webui全局使用到的过滤器filter以及 指令 directive

使用立即执行函数(function(){})(), 具体请参考 https://www.cnblogs.com/yanzp/p/6371292.html

第二行，使用use ‘strict’： “严格模式”。

什么是“use strict”,好处和坏处 https://blog.csdn.net/weixin_40387601/article/details/80514358
5-71行，为module “mesos” 注入routeProvider,定义路由规则

72-129行，定义一系列mesos webui 全局用到的过滤器filter，诸如 ‘dataSize’=> 把kB 动态转为MB,G等等。

services.js

整个代码逻辑结构如下，第72行加入ui.boostrap.dialog 第三方库。 第109行定义了一个函数表达式 Statistics，第200行定义了一个Top 服务对象，并在209行中注入这个服务对象Top.

72 -107 行定义 弹出的模态框的统一样式。 模态框在angularJs 中使用，请参考 https://embed.plnkr.co/plunk/XWNBvo

controller.js

全局是一个立即执行函数。
6-283行先定义一些全局函数functions, 291-1218行定义所有的controller 处理逻辑。


第4行，定义了mesosApp 变量，代表app.js 中angularJS 定义的app。