Предисловие
Прежде всего, давайте не будем говорить о создании основного проекта AngularJS. Лучше всего использовать инструмент для лесов йомана, чтобы генерировать его напрямую. Если такая среда нет, конечно, вы также можете представить проект, загрузив файл angularjs самостоятельно.
Подробный пример объяснения
main.js является основным файлом JS проекта. Все JS написаны в этом файле. После инициализации код JS файла следующим образом
Angular .Module ('CalculatorApp', ['nganimate', 'ngcookies', 'ngresource', 'ngroute', 'ngsanitize', 'ngtouch']) .controller ('manectrl', function ($ scope) {$ scope.result = ""; "1": ["ac", "+/-", "%", "÷"], "2": ["7", "8", "9", "x"], "3": ["4", "5", "6", "-"], "4": [1 "," 2 "," 3 ","+"]," 5 ":", ")") ")") ";Результат здесь используется для привязки результатов расчета в двустороннем привязке, а данные-это цифры и символы на клавиатуре калькулятора.
Все коды CSS, связанные с этим проектом, следующие:
*{маржа: 0; Подкладка: 0;} Body {Padding-Top: 20px; Badding-Bottom: 20px;} h1 {text-align: center; Цвет:#3385ff;}. Main {Margin: 20px Auto; Граница: 1PX SOLI #202020; пограничный под кносом: нет; Ширина: 60%; Высота: 600px;}. Результат {display: block; Ширина: 100%; высота: 30%; Фон:#202020; Распределение коробки: пограничная коробка; граница: нет; Заполнение: 0; поля: 0; Изменение размера: нет; Цвет: #fff; размер шрифта: 80px; Текст-альбом: верно; высота линии: 270px; переполнение: скрыто; фоновая зажима: пограничная бокса;}. row {высота: 14%; Фон: #D7D8DA; Распределение коробки: пограничная коробка; Пограничный подъем: 1PX SOLI #202020; переполнение: скрыто;}. Col {высота: 100%; Распределение коробки: пограничная коробка; граница правая: 1px solid #202020; Плавание: осталось; Цвет: #202020; размер шрифта: 28px; Текст-альбом: Центр; линий-высота: 83px;}. Нормальный {ширина: 25%;}. End-no {width: 25%; граница правая: нет; Фон: #F78E11; Color: #fff;}. Zero {ширина: 50%;}. История {фон: #3385ff; Цвет: #fff; размер шрифта: 22px; Текст-альбом: Центр;}Затем макет HTML выглядит следующим образом:
<body ng-app = "calculatorapp"> <h1> калькулятор для ios8 </h1> <hr/> <p> {{astory.join ("")}} </p> <div> <textarea ng-model = "result"> </textarea> <div ng-repeat = "in data"> <div ng-repeat = "a in in in in inteme in in inteme in пункт =" in "in in in in in in in inte inte inteme in vite repeat =" in "in in in in in in in in in grapeat =" ng-ng-repate = " ng-class = "showclass ($ index, a)" ng-click = "showresult (a)"> {{a}} </div> </div> </div> </body> Здесь P -тег истории класса используется для отображения записи ввода, что означает, что все клавиши, которые вы нажимаете, будут отображаться на нем для удобного просмотра результатов. История - это массив ниже текущей области, который будет объяснен позже. Здесь Textarea используется в качестве экрана дисплея для результатов расчета, в основном для использования двусторонней функции привязки. В то же время каждый ключ и элемент интерфейса калькулятора генерируются путем цикла над объектом данных. Метод showClass представляет собой метод ниже сферы действия, который используется для получения атрибутов класса элементов отображения нерегулярного интерфейса. Это будет объяснено позже. Метод showResult является основным методом реагирования на ключ. Все наши ответы на ключи получены с помощью этого метода, и мы подробно объясним позже.
Код метода ShowClass выглядит следующим образом:
// Показать стиль калькулятора $ scope.showclass = function (index, a) {if (a == 0) {return "Zero"; } return index == 3 || a == "="? "End-no": "Нормальный"; };Этот метод в основном занимается последним столбцом каждой строки, который будет отображаться как оранжевый, а ключи, которые отображают 0, должны занимать две ячейки для специальной обработки.
Пока что интерфейс калькулятора был полностью реализован
Рендеринги следующие:
Следующее необходимо реализовать ответ на ключи. Ключи включают числовые клавиши, ключи оператора и клавиши переменного тока. Каждое нажатие клавиши будет иметь разные ответы, и между ключами существует связь.
Чтобы облегчить код для объяснения, метод используется для предоставления кода метода ShowResult в сегментах, а затем подробно объяснить его.
Прежде всего, нам нужно добавить несколько переменных для управления и хранения.
// Стоп чисел, используемые для расчета $ scope.num = []; $ scope.history = []; // Оператор стек $ scope.opt = []; // Результат расчета калькулятора $ scope.result = ""; // результат калькулятора $ scope.result = ""; // это означает, должно ли начать отображаться снова. Верно означает, чтобы больше не отображаться. Ложные средства для очистки текущего вывода и REDISPLEA Номер $ scope.flag = true; // это означает, может ли оператор быть введен сейчас. Если это может быть истинно, в противном случае это false $ scope.isopt = true;
NUM -массив на самом деле является стеком, используемым для получения номеров, введенных пользователем. Конкретное использование будет объяснено позже. Массив истории - это все ключи, введенные пользователем. Каждый раз, когда вы нажимаете на него, символы или числа на клавише помещаются в стек, а затем отображаются на интерфейсе в режиме реального времени с помощью привязки. Массив OPT - это еще один стек, используемый для получения ввода оператора пользователем. Конкретное использование будет объяснено позже. Флаг - это флаг. Когда True, это означает, что число, нажатое во время нажатия номера, является частью отображаемого в настоящее время номера и необходимо отобразить за ним. Например, текущий интерфейс отображается 12, а затем нажмите 3. Если это правда, будет отображаться 123. В противном случае интерфейс будет очищен, а 3.изопт - еще один флаг. В основном это предотвращение незаконного ввода операторов в процессе ввода. Например, пользователь входит 1+ 2+ подряд. Когда ввод введен здесь, вход ниже должен быть номером, но пользователь входит в оператор. Оценивая этот флаг, калькулятор будет игнорировать этого незаконного оператора и сохранить входные данные все еще 1+2+.
Следующий код приведен в сегментах, и полный код состоит в том, чтобы соединить их вместе.
$ scope.init = function () {$ scope.num = []; $ scope.opt = []; $ scope.history = []; $ scope.flag = true; $ scope.isopt = true; }; $ scope.showresult = function (a) {$ scope.history.push (a); var reg = // d/ig, regdot = //./ig, regabs = /// ig; // Если щелкнуть по номеру if (reg.test (a)) {// Устранение замораживания if ($ scope.isopt == false) {$ scope.isopt = true; } if ($ scope.result! = 0 && $ scope.flag && $ scope.result! = "error") {$ scope.result += a; } else {$ scope.result = a; $ scope.flag = true; }} Метод init используется для инициализации некоторых переменных и флагов, чтобы вернуть их в их первоначальное состояние. Метод showResult является основным методом отображения интерфейса для ответа на операции пользователей. Приведенный выше код представляет собой ветвь в этом методе, указывающий, что если введен ввод оператора, то если ввод в оператор заморожен (оператор в настоящее время не разрешается ввести, и он будет проигнорирован после ввода), то при входе в число введенного въезда состояние замораживания не заблокировано, чтобы стек оператора был введен в следующий раз, когда введен оператор. Если отображаемый в настоящее время результат не является пустым, а нажатый номер является частью отображаемого номера, и нет ошибки, то отображаемый результат заключается в том, что нажатый в данный момент номер подключен к концу отображаемого номера. В противном случае это означает, что номер, в который вы введете в следующий раз, необходимо отобразить после этого номера при повторной игре.
код JS (продолжение)
// Если вы нажмете ac else if (a == "ac") {$ scope.result = 0; $ scope.init (); }Если щелчок AC, это означает инициализацию, пусть результат дисплея будет 0, и все состояния очищены.
код JS (продолжение)
// Если вы нажмете на десятичную точку, иначе if (a == ".") {If ($ scope.result! }}Если щелчок является десятичной точкой, пусть десятичная точка будет подключена к концу текущего дисплея, если текущий дисплей не является пустым, и в текущем результате отображения нет десятичной точки.
код JS (продолжение)
// Если вы нажмете на обратный оператор else if (regabs.test (a)) {if ($ scope.result> 0) {$ scope.result = "-"+$ scope.result; } else {$ scope.result = math.abs ($ scope.result); }}Если щелчок является обратной работой, текущий результат отображения будет обратно пропорционально
код JS (продолжение)
// Если вы нажмете на процентный знак else if (a == "%") {$ scope.result = $ scope.format (номер ($ scope.result)/100); } Если вы нажмете на процентный знак, разделите текущий отображаемый результат на 100, а затем отобразите его. Вот функция format
Код заключается в следующем:
// Формат результат выход $ scope.format = function (num) {var regnum =/. {10,}/ig; if (regnum.test (num)) {if (//./. test (num)) {return num.toexponential (3); } else {return num.toExponential (); }} else {return num; }}} else {return num; }}Его основная функция заключается в том, что калькулятор, который поставляется с iOS8, не будет отображать много цифр бесконечно. Если он превышает 10 цифр (включая десятичные точки), для отображения будут использоваться научные расчеты. Для простоты при использовании научных вычислений для результатов отображения, содержащих десятичные знаки и превышающие 10 цифр, дайте ему сохранить отображение 3 цифр после десятичной точки.
код JS (часть ShowResult подключена)
// Если оператор нажатия и текущий результат отображения не пуст и ошибка иначе if ($ scope.checkoperator (a) && $ scope.result! = "" && $ scope.result! $ scope.num.push ($ scope.result); $ scope.operation (a); // После нажатия оператора один раз, вам нужно игнорировать ситуацию, когда оператор снова нажимается. $ scope.isopt = false; }
Эта ветвь является самой сложной ветвью, что означает, что если вход является оператором, то операция должна быть выполнена. Чтобы ввести эту ветвь, сначала необходимо установить флаг на False, который должен ввести номер в следующий раз, который должен повторно ввести число вместо ввода текущего результата отображения.
Затем пусть отображается в настоящее время отображаемый номер в качестве вычисленного номера для сначала ввода стека номеров. Метод operation - это метод работы. Поскольку на этот раз оператор нажимал, в следующий раз, когда вы нажимаете по нему, вы должны игнорировать этот оператор и установить ISOPT в False.
Код операции выглядит следующим образом
// Сравните приоритет в настоящее время оператора ввода и верхнего оператора стека оператора // Если приоритет верхнего оператора невелик, текущий оператор помещается в стек и не рассчитывает его. // В противном случае верхний оператор помещается в стек, а стек номеров помещается в стек для двух элементов последовательно и вычислить // Затем текущий оператор помещается в стек. $ scope.operation = function (current) {// Если стек оператора пуст, напрямую поместите текущего оператора в стек if (! $ scope.opt.length) {$ scope.opt.push (current); возвращаться; } оператор VAR, справа, слева; var lastopt = $ scope.opt [$ scope.opt.length-1]; // Если текущий приоритет оператора больше, чем последний оператор, введен только стек, если ($ scope.ispri (current, lastopt)) {$ scope.opt.push (current); } else {operator = $ scope.opt.pop (); right = $ scope.num.pop (); слева = $ scope.num.pop (); $ scope.calculate (слева, оператор, справа); $ scope.operation (current); }};Этот метод принимает в настоящее время оператор ввода в качестве параметра. Основная идея заключается в том, что оператор в настоящее время получен. Если стек операторов пуст, текущий оператор будет помещен в стек, а в этом случае нет необходимости делать что -либо еще. Если текущий стек операторов не является пустым, то верхний элемент текущего стека операторов появляется, так что полученный в настоящее время принимаемый оператор и верхний оператор получают приоритет (приоритет умножения и деления больше, чем добавление и вычитание, а верхнему оператору уделяется приоритет того же приоритета, поскольку он впервые введен). Метод ISPRI используется для определения приоритета и получения двух параметров. Первый-это в настоящее время принимаемый оператор, а второй-оператор высшего звена в стеке. Если текущий оператор имеет более высокий приоритет в соответствии с упомянутыми выше правилами, то оператор будет непосредственно помещен в стек. Если приоритет текущего оператора меньше, чем верхняя часть оператора стека, вам необходимо выполнить вычисления и изменить отображение калькулятора. Два элемента в верхней части стопки операционного номера появляются по очереди, так как два рабочих номера для одной операции, а затем верхняя часть стека стека операторов появляется в качестве оператора для этой операции, и метод расчета требуется для метода расчета для работы.
Код метода выглядит следующим образом
// Отвечает за вычисление функции результата $ scope.calculate = function (слева, оператор, справа) {Switch (оператор) {case " +": $ scope.result = $ scope.format (число (слева) + номер (справа)); $ scope.num.push ($ scope.result); перерыв; case " -": $ scope.result = $ scope.format (номер (слева) - число (справа)); $ scope.num.push ($ scope.result); перерыв; case "×": $ scope.result = $ scope.format (номер (слева) * номер (справа)); $ scope.num.push ($ scope.result); перерыв; case "÷": if (right == 0) {$ scope.result = "ошибка"; $ scope.init (); } else {$ scope.result = $ scope.format (номер (слева) / номер (справа)); $ scope.num.push ($ scope.result); } перерыв; по умолчанию: перерыв; }};Этот метод принимает три параметра: левый номер операции, средний оператор и правильный номер операции, и изменяет результат, чтобы отобразить результат после добавления, вычитания, умножения и работы деления, и помещает результат вычисления в стек номера расчета. Здесь необходимо отметить, что если расчет является делением и делитель равен 0, возникает ошибка, ошибки отображения, и все состояния очищаются, в противном случае расчет является нормальным.
После завершения одной операции состояния в стеке операторов и стек номеров будут изменены, а текущее значение текущего ключа не было помещено в стек. Следовательно, приведенный выше процесс должен быть повторен для сравнения приоритетов, а затем выполняется операция. Фактически, это рекурсивный процесс до тех пор, пока стек оператора не станет пустым или приоритет текущего оператора выше, чем верхняя часть оператора стека. Метод ISPRI используется для определения приоритета оператора.
Код заключается в следующем:
// Судите, имеет ли текущий оператор более высокий приоритет, чем последний, если он возвращается true // В противном случае вернуть false $ scope.ispri = function (current, last) {if (current == last) {return false; } else {if (current == "×" || current == "÷") {if (last == "×" || last == "÷") {return false; } else {return true; }} else {return false; }}};Правила суждения были описаны ранее.
Кроме того, существует метод checkOperator , который должен определить, является ли входной символ четырьмя символами оператора добавления, вычитания, умножения и деления.
Код заключается в следующем:
// Судите, является ли текущий символ рабочим символом $ scope.checkoperator = function (opt) {if (opt == "+" || opt == "-" || opt == "×" || opt == "÷") {return true; } вернуть false; }Если так, верните True, иначе верните False.
Пока что все еще есть ветвь с входом, равный числу, который не
Код выглядит следующим образом (подключен к методу ShowResult)
// Если щелчок является равным знаком else if (a == "=" && $ scope.result! = "" && $ scope.result! = "Error") {$ scope.flag = false; $ scope.num.push ($ scope.result); while ($ scope.opt.length! = 0) {var operator = $ scope.opt.pop (); var right = $ scope.num.pop (); var Left = $ scope.num.pop (); $ scope.calculate (слева, оператор, справа); }}};Если вход является равным знаком, сначала установите флаг на false, позволяя интерфейсу Redisplay при следующем введении номера, а отображаемый номер должен быть помещен в стек в виде номера расчета. Затем вам нужно выполнять непрерывные операции по укладкам, пока стек операторов не станет пустым, прежде чем он сможет остановиться.
Суммировать
Приведенное выше является основным кодом и процессом реализации. Поскольку существует много кодов ветвей, все ветви даны одновременно и не могут быть подробно описаны. Следовательно, метод ShowResult разделен, что может быть не адаптируемым. Поскольку написание было спешка и не потребовалось слишком много времени, чтобы проверить, могут быть некоторые ошибки, пожалуйста, укажите на них. В то же время, из -за ограниченных уровней, этот метод может быть не лучшим. Добро пожаловать, чтобы дать лучший план по общению и обучению вместе ~~ Приведенное выше - все содержание этой статьи. Я надеюсь, что это принесет некоторую помощь для каждого обучения или работы.