用Angular.js编写EVM指标计算的Web应用程序非常轻松

2 年 ago

科, 颖

4 minutes

对于要看源代码的人，由于您的写作能力很好，请展示一下源代码。

请忽略文章末尾。

Angular.JS？那是什么？好吃吗？

听说使用Javascript来开发Web应用的时候，Angular.JS被用到，但是我以前从未学习过。我也听说Web界面上已经开始使用Angular2了，但是我只知道它的名字而已。
因为我越来越感兴趣了，所以我决定依靠在网上可以找到的信息，在各种环境下尝试创建简单的应用程序。

以太坊虚拟机（EVM）？

用于在预算和进度的角度上定量管理项目状态的方法被广泛采用，即 EVM（赢得价值管理），作为一名类似于项目管理办公室（PMO）的人，我经常看到这个术语。关于 EVM 的概述可以参考维基百科的文章。请点击以下链接：
https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%83%B3%E3%83%89%E3%83%BB%E3%83%90%E3%83%AA%E3%83%A5%E3%83%BC%E3%83%BB%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88

我将EVM指标计算器制作成了一个Web应用程序。

在EVM中，有一种指标可以评估实际产量和所需成本与计划工时和预算的关系。虽然我认为用PM工具或MS-Excel表格进行计算可能是不必要的，但作为学习题材来说还是很简单和不错的。

Angular.JS 和 Angular2

尽管它们是由相同的团队制作并且名字也很相似，但在尝试使用之后发现它们是完全不同的东西。
Angular.JS 是 JavaScript 的一个库，而 Angular2 是一个用于 Web 应用程序开发的框架。
在 Angular.JS 中，只需从 HTML 文件中调用 JavaScript 库即可使用，非常方便。而在 Angular2 中，需要准备 TypeScript 等一系列环境，使用 HTML 来构建界面，使用 TypeScript 来编写逻辑代码，然后进行编译和构建，并将其部署到服务器上才能运行。
在我们此次使用的 EVM 计算机案例中，由于不使用数据库，所以在 Angular2 中就显得过于复杂了，就像用一个卡车来运送一个棉花糖一样，感觉配置过高。而在 Angular.JS 中，只需使用 JavaScript 库，逻辑部分编写起来非常简便，非常轻松。

公開的版本选择了 Angular.JS 。

(Note: This translation assumes the phrase is referring to the selection of Angular.JS as the version for public release.)

鉴于作为对“Hello World!”的简单入门而言，无论是在Angular2还是Angular.js环境下，我都能够做到。不过，因为在Angular2中公开源代码较为麻烦，而在Angular.js中只需要一个HTML文件（需要网络环境加载库文件），所以我只公开了Angular.js版本的源代码。嗯，虽然我认为没有人会想使用这样的EVM计算机…

EVM计算机的Angular.JS源代码

以下是一个选项：

这个源代码看起来差不多。它只是使用了非常少的脚本，以至于让我怀疑是否有计算代码。
而且，通过Ajax，只需输入数字（没有计算按钮等），结果就会立即显示。
自己用JavaScript编写这个太麻烦了。

<!doctype html>
<html ng-app>
<head>
    <title>EVM-Calc. on AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="bac = 100;pv = 50; ac = 50;ev = 51">
    <div>
    <h1>EVM 各指標の計算</h1>
    <table>
    <tr>
        <td>BAC:</td>
        <td><input type="text" size=8 ng-model="bac"></td>
        <td>完成時総予算（Budget At Completion）</td>
    </tr>
    <tr>
        <td>PV:</td>
        <td><input type="text" size=8 ng-model="pv"></td>
        <td>計画価値（Planned Value）</td>
    </tr>
    <tr>
        <td>AC:</td>
        <td><input type="text" size=8 ng-model="ac"></td>
        <td>実コスト（Actual Cost）</td>
    </tr>
    <tr>
        <td>EV:</td>
        <td><input type="text" size=8 ng-model="ev"></td>
        <td>出来高（Earned Value）</td>
    </tr>
    </table>
    <hr />
    <table>
    <tr>
        <td>SV:</td>
        <td><font color="blue">{{sv = ev - pv}}　</font></td>
        <td>スケジュール差異（Schedule Variance）<br /> = EV - PV</td>
        <td> （0以上であれば良好）</td>
    </tr>
    <tr>
        <td>CV:</td>
        <td><font color="blue">{{cv = ev - ac}}　</font></td>
        <td>コスト差異（Cost Variance）<br /> = EV - AC</td>
        <td> （0以上であれば良好）</td>
    </tr>
    <tr>
        <td>SPI:</td>
        <td><font color="blue">{{spi = ev / pv}}　</font></td>
        <td>スケジュール効率指数（Schedule Performance Index）<br /> = EV / PV</td>
        <td> （1以上であれば良好）</td>
    </tr>
    <tr>
        <td>CPI:</td>
        <td><font color="blue">{{cpi = ev - pv}}　</font></td>
        <td>コスト効率指数（Cost Performance Index）<br /> = EV / AC</td>
        <td> （1以上であれば良好）</td>
    </tr>
    <tr>
        <td>EAC:</td>
        <td><font color="blue">{{eac = ac + (bac - ev) / cpi}}　</font></td>
        <td>完成時総コスト見積り（Estimate At Completion）<br /> = AC + (BAC - EV) / CPI</td>
        <td> （BAC以下であれば良好）</td>
    </tr>
    <tr>
        <td>ETC:</td>
        <td><font color="blue">{{etc = eac - ac}}　</font></td>
        <td>残作業のコスト見積り（Estimate To Completion）<br /> = (BAC - EV) / CPI = EAC - AC</td>
        <td> （残予算以下であれば良好）</td>
    </tr>
    <tr>
        <td>VAC:</td>
        <td><font color="blue">{{vac = bac - eac}}　</font></td>
        <td>完成時コスト差異（Estimate At Completion）<br /> = BAC - EAC</td>
        <td>  （0以上であれば良好）</td>
    </tr>
    </table>

    </div>
</body>
</html>