Vorwort
Lassen Sie uns zunächst nicht über das Erstellen des Grundprojekts von AngularJS sprechen. Es ist am besten, das Gerüstwerkzeug Yeoman zu verwenden, um es direkt zu generieren. Wenn es keine solche Umgebung gibt, können Sie das Projekt natürlich auch vorstellen, indem Sie die AngularJS -Datei selbst herunterladen.
Detaillierte Beispiel Erläuterung
Main.js ist die Haupt -JS -Datei des Projekts. Alle JS sind in dieser Datei geschrieben. Nach der Initialisierung lautet der JS -Code der Datei wie folgt
Angular .module ('CalculatorApp', ['nganimate', 'ngcookies', 'ngresource', 'ngroute', 'ngSanitize', 'ngtouch']) .Controller ('MainCtrl', Funktion ($ scope) {$ scope.result = "; "1": ["ac", "+/-", "%", "÷"], "2": ["7", "8", "9", "×"], "3": ["4", "5", "6", "-"], "4": ["1", "2", ",", "" ".Das Ergebnis hier wird verwendet, um die Berechnungsergebnisse zu einer Zwei-Wege-Bindung zu binden, und Daten sind die Zahlen und Symbole auf der Tastatur des Taschenrechners.
Alle CSS -Codes im Zusammenhang mit diesem Projekt sind wie folgt:
*{Margin: 0; Polsterung: 0;} Körper {Padding-Top: 20px; Padding-Bottom: 20px;} H1 {Text-Align: Mitte; Farbe:#3385ff;}. Main {Margin: 20px Auto; Grenze: 1PX Solid #202020; Grenzboden: Keine; Breite: 60%; Höhe: 600px;}. Ergebnis {Anzeige: Block; Breite: 100%; Höhe: 30%; Hintergrund:#202020; Kastengrößen: Border-Box; Grenze: Keine; Polsterung: 0; Rand: 0; Größenänderung: Keine; Farbe: #fff; Schriftgröße: 80px; Text-Align: Recht; Zeilenhöhe: 270px; Überlauf: versteckt; Hintergrund-Clip: Border-Box;}. Zeile {Höhe: 14%; Hintergrund: #d7d8da; Kastengrößen: Border-Box; Grenzboden: 1PX Solid #202020; Überlauf: versteckt;}. col {Höhe: 100%; Kastengrößen: Border-Box; Grenzrechte: 1PX Solid #202020; float: links; Farbe: #202020; Schriftgröße: 28px; Text-Align: Mitte; Zeilenhöhe: 83px;}. Normal {Breite: 25%;}. End-no {Breite: 25%; Grenzrechte: Keine; Hintergrund: #f78e11; Farbe: #fff;}. Zero {Breite: 50%;}. History {Hintergrund: #3385ff; Farbe: #fff; Schriftgröße: 22px; Text-Align: Mitte;}Dann lautet das HTML -Layout wie folgt:
<Body ng-App = "CalculatorApp"> <h1> Taschenrechner für iOS8 </h1> <hr/> <p> {{{history.join ("")}} </p> <div> <textarea ng-model = "result"> </textarea> <divat-repeat = "item in Data"> <div ng-repeat = "A. ng-class = "showClass ($ index, a)" ng-klick = "showResult (a)"> {{a}} </div> </div> </div> </body> Hier wird das P -Tag des Klassenverlaufs verwendet, um den Eingangsdatensatz anzuzeigen, was bedeutet, dass alle Tasten, die Sie drücken, darauf angezeigt werden, um die Ergebnisse einfach anzuzeigen. Die Geschichte ist ein Array unter dem aktuellen Bereich, der später erklärt wird. Hier wird ein Textbereich als Anzeigebildschirm für die Berechnungsergebnisse verwendet, hauptsächlich für die Zwei-Wege-Bindungsfunktion. Gleichzeitig werden jedes Schlüssel- und Schnittstellenelement des Taschenrechners durch Schleifen über das Datenobjekt generiert. showClass -Methode ist eine Methode unten, mit der die Klassenattribute der Elemente der unregelmäßigen Schnittstellenanzeige angezeigt werden. Es wird später erklärt. showResult -Methode ist die Hauptmethode, um auf den Schlüssel zu reagieren. Alle unsere Antworten auf die Schlüssel werden durch diese Methode erhalten, und wir werden später ausführlich erklären.
Der Showclass -Methodencode lautet wie folgt:
// Calculator Style $ scope.showClass = function (index, a) {if (a == 0) {return "Zero"; } return index == 3 || a == "="? "End-no": "Normal"; };Diese Methode befasst sich hauptsächlich mit der letzten Spalte jeder Zeile, die als Orange angezeigt wird, und die Schlüssel, die 0 anzeigen, müssen zwei Zellen für eine spezielle Verarbeitung einnehmen.
Bisher wurde die Taschenrechnerschnittstelle vollständig implementiert
Die Renderings sind wie folgt:
Das Folgende muss die Reaktion auf die Schlüssel realisieren. Die Schlüssel umfassen numerische Schlüssel, Operatorschlüssel und Wechselstromschlüssel. Jede Tastendrucke hat unterschiedliche Antworten und es besteht eine Verbindung zwischen den Tasten.
Um den Code leichter zu erklären, wird eine Methode verwendet, um den Code der ShowResult -Methode in Segmenten anzugeben und ihn dann ausführlich zu erklären.
Zunächst müssen wir mehrere Variablen für Kontrolle und Speicher hinzufügen.
// Der für die Berechnung verwendete Zahlenstapel $ scope.num = []; $ scope.history = []; // Der Operator Stack $ scope.opt = []; // das Berechnungsergebnis des Taschenrechners $ scope.result = ""; // das Ergebnis des Taschenrechners $ scope.result = ""; // es bedeutet, ob erneut angezeigt werden soll. Wahre bedeutet, nicht wieder anzuzeigen. Falsche Mittel, um die aktuelle Ausgabe zu löschen und die Zahl $ scope.flag = true wieder zu entfernen; // Es bedeutet, ob der Bediener jetzt eingegeben werden kann. Wenn es wahr sein kann, ist es ansonsten falsch $ scope.isopt = true;
Das Num -Array ist eigentlich ein Stapel, mit dem die vom Benutzer eingegebenen Zahlen empfangen werden. Die spezifische Verwendung wird später erklärt. Das Verlaufsarray ist alle vom Benutzer eingegebenen Schlüssel. Jedes Mal, wenn Sie es drücken, werden die Symbole oder Zahlen auf der Taste in den Stapel eingefügt und dann in Echtzeit auf der Schnittstelle mit der Bindung angezeigt. Das Opt -Array ist ein weiterer Stack, der zum Empfangen der Bedienereingabe vom Benutzer verwendet wird. Die spezifische Verwendung wird später erklärt. Flagge ist eine Flagge. Wenn dies stimmt, bedeutet dies, dass die während des Drückens der Nummer gedrückte Zahl Teil der derzeit angezeigten Nummer ist und dahinter angezeigt werden muss. Beispielsweise wird die aktuelle Schnittstelle 12 angezeigt und dann wird Press 3 beurteilt. Wenn wahr, wird 123 angezeigt. Andernfalls wird die Schnittstelle gelöscht und 3.ISOPT ist eine andere Flagge. Es ist hauptsächlich, den Benutzer während des Eingabeprozesses von illegalen Eingaben von Operatoren zu verhindern. Zum Beispiel tritt der Benutzer nacheinander 1+ 2+ ein. Wenn die Eingabe hier eingegeben wird, sollte die folgende Eingabe eine Nummer sein, der Benutzer gibt jedoch einen Bediener ein. Durch die Beurteilung dieser Flagge ignoriert der Taschenrechner diesen illegalen Bediener und hält die Eingabe immer noch 1+2+.
Der folgende Code ist in Segmenten angegeben, und der vollständige Code besteht darin, sie miteinander zu verbinden.
$ 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; // Wenn Sie auf eine Nummer klicken, wenn (reg.test (a)) {// Einfrieren von if ($ scope.isopt == false) {$ scope.isopt = true; } if ($ scope.result! = 0 && $ scope.flag && $ scope.result! } else {$ scope.result = a; $ scope.flag = true; }} Die init -Methode wird verwendet, um einige Variablen und Flaggen zu initialisieren, um sie in ihren ursprünglichen Zustand zurückzugeben. showResult -Methode ist die Hauptmethode, um die Schnittstelle anzuzeigen, um auf Benutzeroperationen zu reagieren. Der obige Code ist ein If -Zweig in dieser Methode, der angibt, dass wenn die Eingabe des Bedieners eingegeben wird. Wenn die Eingabe an den Bediener eingefroren wurde (der Bediener darf derzeit nicht eingegeben werden, und er wird nach der Eingabe ignoriert), dann wird der Bediener -Stapel eingegeben. Wenn das derzeit angezeigte Ergebnis nicht leer ist und die gedrückte Nummer Teil der aktuell angezeigten Nummer ist und kein Fehler auftritt, ist das angezeigte Ergebnis, dass die derzeit gedrückte Nummer mit dem Ende der aktuell angezeigten Nummer verbunden ist. Andernfalls bedeutet dies, dass die Nummer, die Sie beim nächsten Mal eingeben, nach dieser Nummer bei der Wiedereinstellung angezeigt werden muss.
JS -Code (Fortsetzung)
// Wenn Sie auf AC sonst klicken, wenn (a == "ac") {$ scope.result = 0; $ scope.init (); }Wenn der geklickte AC, bedeutet dies die Initialisierung, lassen Sie das Anzeigeergebnis 0 sein und alle Zustände werden gelöscht.
JS -Code (Fortsetzung)
// Wenn Sie auf einen Dezimalpunkt sonst klicken, wenn (a == ".") {If ($ scope.result! }}Wenn es sich bei dem Klickspunkt um einen Dezimalpunkt handelt, lassen Sie den Dezimalpunkt mit dem Ende der aktuellen Anzeige verbunden, wenn die aktuelle Anzeige nicht leer ist und es im aktuellen Ergebnisergebnis keinen Dezimalpunkt enthält.
JS -Code (Fortsetzung)
// Wenn Sie auf einen inversen Operator sonst klicken, wenn (Regabs.Test (a)) {if ($ scope.result> 0) {$ scope.result = "-"+$ scope.result; } else {$ scope.result = math.abs ($ scope.Result); }}Wenn das Klick eine umgekehrte Operation ist, ist das aktuelle Anzeigeergebnis umgekehrt
JS -Code (Fortsetzung)
// Wenn Sie auf ein prozentuales Zeichen sonst klicken, wenn (a == "%") {$ scope.result = $ scope.format (number ($ scope.result)/100); } Wenn Sie auf ein prozentuales Zeichen klicken, teilen Sie das aktuell angezeigte Ergebnis um 100 und zeigen Sie es an. Hier ist eine format
Der Code ist wie folgt:
// Formatergebnisausgabe $ 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; }}Seine Hauptfunktion ist, dass der mit iOS8 gelieferte Taschenrechner nicht viele Ziffern unendlich angezeigt wird. Wenn es 10 Ziffern überschreitet (einschließlich Dezimalpunkte), werden wissenschaftliche Berechnungen verwendet, um anzuzeigen. Der Einfachheit halber bei Verwendung wissenschaftlicher Berechnungen für die Anzeigeergebnisse, die Dezimalpunkte enthalten und 10 Ziffern überschreiten, lassen Sie die Anzeige von 3 Ziffern nach dem Dezimalpunkt beibehalten.
JS -Code (ShowResult -Teil ist verbunden)
// Wenn der geklickte Operator und das aktuelle Displayergebnis nicht leer und fehleransonsten sind, wenn ($ scope.Checkoperator (a) && $ scope.result! = "" && $ scope.result! $ scope.num.push ($ scope.result); $ scope.operation (a); // Nachdem Sie einmal auf den Operator geklickt haben, müssen Sie die Situation ignorieren, in der der Bediener erneut geklickt wird. $ scope.isopt = false; }
Dieser Zweig ist der komplexeste Zweig, was bedeutet, dass der Betrieb, wenn der Eingang ein Operator ist, der Vorgang durchgeführt werden soll. Um diesen Zweig einzugeben, müssen Sie zuerst auf False einstellen, um die Nummer beim nächsten Mal einzugeben, wodurch die Zahl wieder eingegeben wird, anstatt das aktuelle Anzeigeergebnis einzugeben.
Lassen Sie dann die aktuell angezeigte Nummer als die Nummer, die berechnet wird, um zuerst den Numberstapel einzugeben. operation Betriebsmethode ist die Betriebsmethode. Da dieses Mal ein Bediener angeklickt wurde, müssen Sie diesen Bediener beim nächsten Klicken ignorieren und ISOPT auf False einstellen.
Der Betriebscode ist wie folgt
// Vergleichen Sie die Priorität des aktuell Eingabedreibers und des Operator -Stack -Top -Operators // Wenn die Priorität des oberen Operators klein ist, wird der aktuelle Bediener auf den Stapel gesetzt und berechnet ihn nicht. // Ansonsten wird der oberste Bediener auf den Stapel gesetzt, und der Zahlenstapel wird nacheinander auf den Stapel gesetzt und berechnet //, dann wird der aktuelle Bediener auf den Stapel gesetzt. $ scope.operation = function (current) {// Wenn der Bedienerstapel leer ist, legen Sie den aktuellen Operator direkt auf den Stack if (! zurückkehren; } var Operator, rechts, links; var lastopt = $ scope.opt [$ scope.opt.Length-1]; // Wenn der aktuelle Bedienerpriorität größer ist als der letzte Bediener, wird nur der Stapel eingegeben, wenn ($ scope.ispri (aktuell, lastopt)) {$ scope.opt.push (aktuell); } else {operator = $ scope.opt.pop (); right = $ scope.num.pop (); links = $ scope.num.pop (); $ scope.calculate (links, Operator, rechts); $ scope.operation (aktuell); }};Diese Methode akzeptiert den aktuellen Eingangsoperator als Parameter. Die Kernidee ist, dass derzeit ein Betreiber empfangen wird. Wenn der Bedienerstapel leer ist, wird der aktuelle Bediener auf den Stapel gesetzt, und dann müssen in diesem Fall nichts anderes tun. Wenn der aktuelle Operatorstapel nicht leer ist, wird das obere Element des aktuellen Operatorstacks angezeigt, so dass der derzeit empfangene Betreiber und dem oberen Operator Priorität erhalten (die Priorität der Multiplikation und der Teilung ist größer als Addition und Subtraktion, und der oberste Operator wird vorrangig der gleichen Priorität angegeben, da er zunächst eingegeben wird). Die ISPRI -Methode wird verwendet, um die Priorität zu bestimmen und zwei Parameter zu empfangen. Der erste ist der aktuell empfangene Betreiber und der zweite ist der oberste Stapelbetreiber auf dem Stapel. Wenn der aktuelle Betreiber gemäß den oben genannten Regeln eine höhere Priorität hat, wird der Bediener direkt auf den Stapel gesetzt. Wenn die Priorität des aktuellen Operators kleiner als die Oberseite des Stapeloperators ist, müssen Sie Berechnungen durchführen und die Anzeige des Taschenrechners ändern. Die beiden Elemente oben am Stapel der Betriebsnummer werden nacheinander aufgetaucht, da die beiden Betriebsnummern für einen Vorgang und dann die Oberseite des Stapels des Bedienungsstapels als Operator für diesen Vorgang aufgetaucht sind, und die Berechnungsmethode ist für die Berechnungsmethode für den Betrieb gefordert.
Der Methodcode ist wie folgt
// verantwortlich für die Berechnung der Ergebnisfunktion $ scope.calculate = function (links, operator, rechts) {switch (operator) {case " +": $ scope.result = $ scope.format (Nummer (links) + Nummer (rechts)); $ scope.num.push ($ scope.result); brechen; Fall " -": $ scope.result = $ scope.format (number (links) - Nummer (rechts)); $ scope.num.push ($ scope.result); brechen; Fall "×": $ scope.result = $ scope.format (Nummer (links) * Nummer (rechts)); $ scope.num.push ($ scope.result); brechen; Fall "÷": if (rechts == 0) {$ scope.result = "error"; $ scope.init (); } else {$ scope.result = $ scope.format (number (links) / number (rechts)); $ scope.num.push ($ scope.result); } brechen; Standard: Break; }};Diese Methode akzeptiert drei Parameter, die linke Betriebsnummer, den mittleren Bediener und die rechte Betriebsnummer, und ändert das Ergebnis, um das Ergebnis nach dem Hinzufügen, Subtrahieren, Multiplikation und Abteilungsbetrieb anzuzeigen, und stellt das Berechnungsergebnis in den Stapel der Berechnungsnummer. Hier ist zu beachten, dass bei der Aufteilung der Berechnung und der Divisor 0, ein Fehler auftritt, Fehler angezeigt und alle Zustände gelöscht werden, sonst ist die Berechnung normal.
Nach Abschluss eines Vorgangs werden die Staaten im Bedienerstapel und der Zahlenstapel geändert, und der aktuelle wichtige aktuelle Wert wurde nicht in den Stapel gesteckt. Daher muss der obige Vorgang für den Prioritätsvergleich wiederholt werden und dann wird die Operation durchgeführt. Tatsächlich handelt es sich um einen rekursiven Vorgang, bis der Bedienerstapel leer ist oder die Priorität des aktuellen Bedieners höher ist als der Bedieneroberteil des Bedienungsstapels. Die ISPRI -Methode wird verwendet, um die Priorität des Bedieners zu bestimmen.
Der Code ist wie folgt:
// Beurteile, ob der aktuelle Betreiber eine höhere Priorität hat als letztes, wenn er true zurückgegeben wird // ansonsten false $ scope.ispri = Funktion (aktuell, letztes) {if (current == last) {return false; } else {if (current == "×" || current == "÷") {if (last == "×" || last == "÷") {return false; } else {return true; }} else {return false; }}};Die Urteilsregeln wurden früher beschrieben.
Darüber hinaus gibt es eine checkOperator -Methode, bei der festgestellt wird, ob das Eingabetrat die vier Operatorsymbole für Addition, Subtraktion, Multiplikation und Abteilung ist.
Der Code ist wie folgt:
// Beurteile, ob das aktuelle Symbol ein operatives Symbol ist $ scope.Checkoperator = Funktion (opt) {if (opt == "+" || opt == "-" || opt == "×" || opt == "÷") {return true; } return false; }Wenn ja, kehren Sie true zurück, andernfalls kehren Sie falsch zurück.
Bisher gibt es immer noch einen Zweig mit Eingabe, der der Zahl entspricht, die nicht hat
Der Code ist wie folgt (mit der ShowResult -Methode verbunden)
// Wenn das Klick das gleiche Zeichen sonst ist, wenn (a == "=" && $ scope.result! = "" && $ scope.result! $ scope.num.push ($ scope.result); while ($ scope.opt.length! = 0) {var operator = $ scope.opt.pop (); var right = $ scope.num.pop (); var links = $ scope.num.pop (); $ scope.calculate (links, Operator, rechts); }}};Wenn die Eingabe ein gleiches Vorzeichen ist, setzen Sie das Flag zuerst auf False, sodass die Schnittstelle beim nächsten Eingeben der Nummer wieder enthält, und die aktuell angezeigte Nummer muss als Berechnungsnummer in den Stapel eingefügt werden. Dann müssen Sie kontinuierliche Stapelvorgänge ausführen, bis der Bedienerstapel leer ist, bevor er anhalten kann.
Zusammenfassen
Das obige ist der Hauptcode und der Hauptprozess der Implementierung. Da es viele Zweigcodes gibt, werden alle Zweige gleichzeitig angegeben und können nicht ausführlich beschrieben werden. Daher ist die ShowResult -Methode getrennt, die möglicherweise nicht anpassungsfähig ist. Da das Schreiben Eile war und nicht zu viel Zeit zum Testen genommen hat, kann es einige Fehler geben, bitte weisen Sie sie darauf hin. Gleichzeitig ist diese Methode aufgrund begrenzter Niveaus möglicherweise nicht die beste. Willkommen, um einen besseren Plan zu ermöglichen, um gemeinsam zu kommunizieren und gemeinsam zu lernen. ~~ Das oben genannte ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird jedem Studium oder Arbeit Hilfe bringen.