iOS8的计算器基于AngularJS

前言

首先，创建AngularJS基本项目就更不用说了。这是更好地使用自耕农脚手架工具创建直接。如果没有这样的环境，当然，你也可以下载AngularJS文件介绍项目。

一个例子的详细说明

main.js是项目主要的JS文件，和所有的js写在这个文件。初始化后，文件的js代码如下所示
角
。模块（'calculatorapp，{
nganimate，
ngcookies，
ngresource，
ngroute，
ngSanitize可，
ngtouch
}）
控制器（'mainctrl功能（范围）{
范围结果；
范围=数据= {
1：
2：{ 7
3：{ 4
4：{ 1
5：{ 0
}；
}）；
这里的结果用于双向绑定显示结果，数据是计算器键盘上的数字和符号。

与项目相关的所有CSS代码如下所示：
* {
保证金：0；
填充：0；
}

{体
20px垫上；
座垫：20px；
}
h1 {
文本对齐：中心；
颜色：# 3385ff；
}
主要{。
保证金：20px汽车；
边境：1px solid # 202020；
边界底部：无；
宽度：60%；
身高：600px；
}

结果{。
显示块；
宽度：100%；
身高：30%；
背景：# 202020；
盒尺寸：边框框；
边界：无；
填充：0；
保证金：0；
调整大小：无；
颜色：# FFF；
字体大小：80px；
文本对齐：正确；
行高：270px；
溢出：隐藏；
背景剪辑：边框框；

}
行{。
身高：14%；
背景：# d7d8da；
盒尺寸：边框框；
底部边框：1px solid # 202020；
溢出：隐藏；
}

Col {。
身高：100%；
盒尺寸：边框框；
边境：1px solid # 202020；
浮点数：左；
颜色：# 202020；
字体大小：28px；
文本对齐：中心；
行高：83px；
}
正常{。
宽度：25%；
}
结束{
宽度：25%；
边界权：无；
背景：# f78e11；
颜色：# FFF；

}
零{。
宽度：50%；
}
历史{。
背景：# 3385ff；
颜色：# FFF；
字体大小：22px；
文本对齐：中心；
}
然后HTML的布局如下：
计算器对于iOS8

（历史
转动}
这里，类的p标签是历史，它用于显示输入记录。也就是说，你按下的所有键都会显示在屏幕上，这样你就可以很容易地看到结果。历史将稍后解释当前范围下的数组。一个文本是用在这里作为一个计算的结果显示，主要使用双向绑定功能，同时产生不同的密钥和计算器的界面元素都是通过数据对象生成的循环次数，showClass方法一个用来获取范围下面的方法，不规则的界面显示的元素的类属性，会回去，显示诊断结果是对新闻反应的主要方法，所有的按键反应正是通过这种方法，将详细解释后。

showClass方法代码如下：
显示计算器样式
美元的范围。showClass =函数（指数、A）{
如果（= = 0）{
返回零；
}
收益指数= = 3 | | = ==没有：正常；
}；
此方法主要用于将每个行的最后列显示为橙色，并显示0的按钮来占用两个单元格进行特殊处理。

到目前为止，计算器的接口已经完全实现。

结果如下：
接下来，我们需要实现对按钮的响应。键包括数字键、操作键和AC键。每个按钮按不同的方式，键之间有一个连接。

为了使代码容易解释，对代码段显示诊断结果方法给出并详细解释的方法。

首先，需要添加几个变量来控制和存储。
使用数字计算/堆栈
$范围；
$范围；
使用堆栈运算符接受输入
$范围；
计算结果{计算器}
范围结果；
指示是否启动显示，TRUE表示不显示，false表示清除当前输出到数字显示。
$范围；
目前是否可以进入/运营商，如果可以是真的，否则是假的。
美元的范围。isopt =真；
数字数组实际上是一个堆栈，用于接收用户输入的数字。具体用法将在后面解释。历史上的所有用户将输入的数组的键，按符号或数字键上的堆栈的每一次，然后使用绑定在实时界面显示，选择另一个堆栈阵列接收用户的输入操作。具体的使用说明，标志是真正的标志时，压压图中的进程数是目前数字显示部分，显示在它的后面，如当前界面显示为12，然后按3次确定的迹象，如果真的123，显示，或清晰的界面，直接显示3.isopt是另一个迹象，主要是防止非法用户输入，在输入过程中的操作，如用户输入1 + 2 +后，当输入在这里，是低输入应该是一个数字，但是用户输入了一个操作符，通过判断这个符号，将让计算器忽略非法操作符，使输入保持1 + 2 +。

下面是代码部分，完整的代码是连接它们。
函数（）{
$范围；
$范围；
$范围；
scope.flag美元=真；
美元的范围。isopt =真；

}；
美元范围，显示诊断结果=函数（）{
scope.history.push美元（一）；
VaR reg = / /搞笑，regdot = / ， /搞笑，regabs = / / /搞笑；
如果您单击数字/
如果（reg.test（））{
消除冻结
如果（美元范围。isopt = = false）{
美元的范围。isopt =真；
}

如果（scope.result美元！= 0美元scope.flag scope.result美元！=错误{）{
scope.result =一美元；
}
{其他
scope.result =一美元；
scope.flag美元=真；
}

}
init方法是用来初始化一个变量数和标志，让他们回到原来的状态，显示诊断结果的方法是在响应用户操作界面显示的主要方法，上面的代码是如法的一个分支，如果输入一个数字，因此如果输入已被冻结（目前不允许输入操作，输入将被忽略），然后输入你解开冰冻状态的次数，这样下次输入操作符将进入操作栈。如果当前显示的结果是不空的，现在的数码印刷机是数字显示的一部分，没有发生错误，然后显示结果是当前数字连接在数字地结束当前的新闻八字，或重新显示的代表，时间显示输入的数字显示下一个需要在地面的数字背后。

js代码（上）
如果您单击AC / /
否则，如果（a = AC ）{
$范围=结果0；
scope.init美元（）；
}
如果单击是ac，则代表初始化，显示结果为0，清除所有状态。

js代码（上）
如果单击是小数点
否则如果（= =）。{）
如果（scope.result美元！=！！regdot.test（美元范围。结果））{
范围=结果；
}
}
如果单击小数点，则当前显示不为空时，小数点将连接到当前显示的结尾，当前显示的结果中没有小数点。

js代码（上）
如果你点击一个反向操作符
如果（regabs.test（））{
如果（$范围.结果> 0）{
美元范围。结果= + $ scope.result；
}
别的{
美元范围。结果= math.abs（美元范围。结果）；
}
}
如果单击是反向操作，则当前显示结果是相反的。

js代码（上）
如果单击某个标志
否则如果（a = % ）{
美元美元范围。结果= scope.format（数（美元范围。结果） / 100）；

}
如果单击一个符号，则结果将被分割为100，然后显示当前的显示，有一个格式化函数。

代码如下：
结果输出格式
范围=格式=函数（数字）{
VaR的统治= /。{ 10 } /搞笑；
如果（regnum.test（努姆））{
如果（测试（努姆））{
返回num.toexponential（3）；
}
别的{
返回num.toexponential（）；
}
}
别的{
返回num；
}
}
这是iOS8内置计算器的主要功能将不显示一个无穷大的数，如果超过10（包括小数点），是用来显示科学的计算方法，在这里为了简单起见，含小数点和超过10的结果显示采用科学的计算方法来计算的，让它保留小数点后3位数字显示。

JS code (part of showResult)
如果你点击一个操作符，当前的显示结果不是null和错误。
如果（$ scope.checkoperator（一）scope.result美元！= scope.result美元！=错误的范围。isopt）{
$范围；
scope.num.push美元（美元范围。结果）；
scope.operation美元（一）；
在再次点击操作操作员后，需要忽略这种情况。
isopt =假美元的范围；
}
这个分支是最复杂的分支，它代表操作，如果输入是操作符。要到达这个分支，我们需要首先将标志设置为false，即再次输入数字，即再次输入数字，而不是输入当前的显示结果。

然后，我们需要让当前显示的数字作为数字数字首先进入数字堆栈。操作方法操作方法，因为这一次点击操作，所以下次我们再点击，我们将忽略此操作和设置isopt假。

操作代码如下所示
比较当前输入操作符和运算符堆栈运算符优先级
如果栈顶运算符优先，则当前运算符进入堆栈，且不计算，
堆栈运算符堆栈的顶部，以及堆栈中两个连续数字元素的堆栈，计算
然后将当前操作符放入堆栈中。
范围=操作=函数（当前）{
如果堆栈是空的，则当前堆栈运算符
如果（！$范围。选择长度）{
scope.opt.push美元（电流）；
返回；
}
var运算符，右，左；
无功lastopt = $ { $范围范围。选择。选择length-1 }；
如果当前运算符的优先级大于最后一个运算符，则只能放入堆栈中。
如果（$ scope.ispri（电流、lastopt））{
scope.opt.push美元（电流）；
}
别的{
运算符= $（）scope.opt.pop；
右scope.num.pop美元（）；
左= scope.num.pop美元（）；
scope.calculate美元（左，算子，右）；
scope.operation美元（电流）；
}
}；
此方法以输入运算符作为参数。它的核心思想是目前接到一个接线员。如果运算符栈为空，将当前操作员放进栈，然后将不需要做任何事情。如果运算符栈不空，然后弹出栈顶元素当前操作员，让电流接收运算符和运算符栈优先（优先级大于加法和减法，相同优先级的运算符栈顶的条件下具有更高的优先级，因为堆栈第一），ispri法来确定优先级，接收两个参数，获得当前操作的第一、二个栈顶运算符，如果与先前的规则按照优先级高的流算符，然后直接到运算符栈。如果当前运算符的优先级小于堆栈运算符的顶部，然后需要计算和更改计算器显示，两个元素的操作数堆栈堆栈被弹出，作为21个数字计算，然后弹出堆栈元素运算符的顶部，作为此操作的操作符，调用计算方法操作。

方法代码如下所示
负责计算结果功能
$ =函数（左，运算符，右）{
开关（运算符）{
案例+：
scope.result = $（美元scope.format数（左）+数字（右））；
scope.num.push美元（美元范围。结果）；
打破；
案例：
scope.result = $（美元scope.format数（左）数（右））；
scope.num.push美元（美元范围。结果）；
打破；
案例x：
scope.result = $（美元scope.format数（左）数×（右））；
scope.num.push美元（美元范围。结果）；
打破；
案例：
如果（右= 0）{
范围结果错误；
scope.init美元（）；
}
别的{
scope.result = $（美元scope.format数（左）和数量（右））；
$scope.num.push ($scope.result);
}
打破；
默认值：中断；
}
}；
这种方法需要三个参数，中间的左操作数，并对操作者的操作按照数量，改变结果的方法，术后经加、减、乘、除计算结果入栈的操作数栈，注意这里如果分工操作和除数为0，那么出现错误，显示错误，清除所有的不正常运行状态。

一旦操作完成，和数字运算符栈栈的状态将发生变化，而目前的关键的电流值不在栈中，因此具有重复运行优先的过程，实际上是一个递归的过程，直到运算符栈为空或电流算符优先于运算符栈的栈顶运算符，ispri法确定操作者优先

代码如下：
确定操作符是否比上一个优先级高，如果返回真的
否则为false。
美元的范围。ispri =功能（电流，最后）{
如果（当前=最后）{
返回false；
}
{其他
如果（电流= =X| |电流= = / ）{
如果（最后= =X| |最后= = / ）{
返回false；
}
别的{
返回true；
}
}
别的{
返回false；
}
}
}；
判决规则已被告知之前。

另外一个checkoperator方法，是确定输入符号不加，减，乘，除四则运算符号

代码如下：
是否可以判断当前符号操作符号
美元的范围。checkoperator =功能（选配）{
如果（选择= =+| |选择= = | |选择= =X| |选择= = / ）{
返回true；
}
返回false；
}
如果返回true，则返回true，或返回false。

到目前为止，有一个输入和相等的分支。

代码如下（显示诊断结果的方法）
如果你点击的数字等于
如果（= ==scope.result美元！= scope.result美元！=错误{）{
$范围；
scope.num.push美元（美元范围。结果）；
而（scope.opt.length美元！= 0）{
var =操作符scope.opt.pop美元（）；
VaR scope.num.pop美元（右）；
VaR左= scope.num.pop美元（）；
scope.calculate美元（左，算子，右）；
}
}
}；
如果输入的数目相等，国旗第一次设置为false，允许接口将重新显示在输入号码，和当前显示的号码作为运算数栈的数字叠加。然后要连续堆栈操作直到运算符栈空停。

总结

以上是主要执行代码的过程，因为所有的树枝不能详细描述一旦分支代码不止一次，所以显示诊断结果的方法是分离的，这可能不是很适合。由于匆忙写作，没有时间花太多的时间来测试，可能有一些bug，欢迎指出。同时，由于水平有限，这个方法可能不是最好的。欢迎大家一起计划，交流学习。不仅仅是这篇文章的全部内容。我希望它能给大家的学习或工作带来一些帮助。