序文
まず、Angularjsの基本プロジェクトの作成について話しないでください。足場ツールヨーマンを使用して直接生成するのが最善です。もちろん、そのような環境がない場合は、AngularJSファイルを自分でダウンロードしてプロジェクトを導入することもできます。
詳細な例の説明
Main.jsは、プロジェクトのメインJSファイルです。すべてのJSはこのファイルに記述されています。初期化後、ファイルのJSコードは次のとおりです
Angular .Module（ 'calculatureApp'、['nganimate'、 'ngcookies'、 'ngresource'、 'ngroute'、 'ngsanitize'、 'ngtouch']）.controller（ 'mainctrl'、function（$ scope）{$ scope.Result = ""; $ scope.data = {{{ "1"：["ac"、 "+/-"、 "％"、 "÷"]、 "2"：["7"、 "8"、 "9"、 "×"]、 "3"：["4"、 "5"、 "6"、 "]、" 4 "：" 1 "、" 2 "、" 3 "、" ^ここでの結果は、計算結果を双方向の結合で結合するために使用され、データは計算機キーボードの数字と記号です。
このプロジェクトに関連するすべてのCSSコードは次のとおりです。
*{マージン：0;パディング：0;} body {padding-top：20px;パディングボトム：20px;} h1 {text-align：center;色：＃3385ff;}。main {margin：20px auto;国境：1pxソリッド＃202020;国境圏：なし;幅：60％;高さ：600px;}。result {display：block;幅：100％;高さ：30％;背景：＃202020;ボックスサイズ：ボーダーボックス;国境：なし;パディング：0;マージン：0;サイズのサイズ：なし;色：#fff;フォントサイズ：80px;テキストアライグ：右;ラインハイト：270px;オーバーフロー：隠し;バックグラウンドクリップ：border-box;}。row {height：14％;背景：＃d7d8da;ボックスサイズ：ボーダーボックス;国境圏：1pxソリッド＃202020;オーバーフロー：隠し;}。col {height：100％;ボックスサイズ：ボーダーボックス;国境右：1pxソリッド＃202020;フロート：左;色：＃202020;フォントサイズ：28px;テキストアライグ：センター; Line-Height：83px;}。通常の{width：25％;}。end-no {width：25％;国境右：なし;背景：＃f78e11;色：#fff;}。zero {width：50％;}。history {background：＃3385ff;色：#fff;フォントサイズ：22px;テキストアライグ：センター;}次に、HTMLレイアウトは次のとおりです。
<body ng-app = "calculatureApp"> <h1> iOS8の電卓</h1> <hr/> <p> {{history.join（ ""）}} </p> <div> <textarea ng-model = "result"> </textarea> <ng-repeat = "Item"> <div ng-repeat = " ng-class = "showclass（$ index、a）" ng-click = "showresult（a）"> {{a}} </div> </div> </div> </body>ここでは、クラス履歴のPタグを使用して入力レコードを表示します。つまり、プレスするすべてのキーが表示され、結果を簡単に表示することができます。歴史は現在の範囲の下の配列であり、後で説明します。ここでは、主に双方向結合機能を使用するために、計算結果のディスプレイ画面としてテキストアレアが使用されます。同時に、計算機の各キーとインターフェイス要素は、データオブジェクトをループすることにより生成されます。 showClassメソッドは、不規則なインターフェイスディスプレイ要素のクラス属性を取得するために使用されるスコープ以下のメソッドです。後で説明します。 showResultメソッドは、キーに応答する主な方法です。キーに対するすべての応答は、この方法を通じて取得されます。後で詳しく説明します。
ShowClassメソッドコードは次のとおりです。
//計算機スタイルを表示$ scope.showclass = function（index、a）{if（a == 0）{return "zero"; } return index == 3 || a == "="？ "end-no"： "normal"; };この方法は、主に各行の最後の列をオレンジとして表示するものとして扱い、0を表示するキーは特別な処理のために2つのセルを占有する必要があります。
これまでのところ、電卓インターフェイスが完全に実装されています
レンダリングは次のとおりです。
キーへの応答を実現するには、以下が必要です。キーには、数値キー、オペレーターキー、ACキーが含まれます。各キープレスには異なる応答があり、キー間に接続があります。
コードの説明を容易にするために、セグメントでShowResultメソッドのコードを提供し、詳細に説明するための方法を使用します。
まず、制御とストレージのためにいくつかの変数を追加する必要があります。
//計算に使用される数値のスタック$ scope.num = []; $ scope.history = []; //オペレータースタック$ scope.opt = []; //計算結果の計算結果$ scope.result = ""; //計算機の結果$ scope.result = ""; //再び表示を開始するかどうかを意味します。真のことは、二度と表示しないことを意味します。 falseは、現在の出力をクリアし、数字$ scope.flag = trueを再表示することを意味します。 //オペレーターを今入力できるかどうかを意味します。それが真である可能性がある場合、それ以外の場合、それはfalse $ scope.isopt = trueです。
numアレイは実際にはスタックであり、ユーザーが入力した番号を受信するために使用されます。特定の使用法については後で説明します。履歴配列は、ユーザーが入力したすべてのキーです。それを押すたびに、キーのシンボルまたは数値がスタックに入れられ、バインディングを使用してリアルタイムでインターフェイスに表示されます。 OPTアレイは、ユーザーによるオペレーターの入力を受信するために使用される別のスタックです。特定の使用法については後で説明します。旗は旗です。本当の場合、それは数字のプレス中に押された数が現在表示されている数の一部であり、その背後に表示する必要があることを意味します。たとえば、現在のインターフェイスが12が表示され、プレス3が審査されます。 Trueの場合、123が表示されます。それ以外の場合、インターフェイスがクリアされ、3.ISOPTは別のフラグです。主に、入力プロセス中にユーザーがオペレーターの違法な入力を防ぐことです。たとえば、ユーザーは連続して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））{// freezing 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メソッドは、ユーザー操作に応答するインターフェイスを表示する主な方法です。上記のコードは、この方法のIFブランチであり、オペレーターの入力が入力された場合、オペレーターへの入力が凍結されている場合（オペレーターは現在入力されていないこと、入力後に無視されます）。現在表示されている結果が空でなく、押された数が現在表示されている数字の一部であり、エラーが発生しない場合、表示されている結果は現在表示されている数字の最後に接続されていることです。それ以外の場合は、次回入力した数値を再表示するときにこの番号の後に表示する必要があることを意味します。
JSコード（続き）
// ACをクリックした場合、if（a == "ac"）{$ scope.result = 0; $ scope.init（）; }クリックしたACの場合、それは初期化を意味し、表示の結果を0にし、すべての状態をクリアします。
JSコード（続き）
//小数点をクリックする場合、else if（a == "。"）{if（$ scope.result！= "" &&！regdot.test（$ scope.result））{$ scope.result+= a; }}クリックされたものが小数点である場合、現在のディスプレイが空でなく、現在の表示結果に小数点がない場合、小数点を現在のディスプレイの端に接続します。
JSコード（続き）
//逆演算子をクリックする場合、else else if（regabs.test（a））{if（$ scope.result> 0）{$ scope.result = " - "+$ scope.result; } else {$ scope.result = math.abs（$ scope.result）; }}クリックされたものが逆操作である場合、現在の表示結果は反比例します
JSコード（続き）
//パーセンテージサインをクリックする場合、else else if（a == "％"）{$ scope.result = $ scope.format（number（$ scope.result）/100）; }パーセントサインをクリックすると、現在の表示結果を100で除算してから表示します。これがformat関数です
コードは次のとおりです。
// format result output $ 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パーツが接続されています）
//クリックされた演算子と現在の表示結果が空でない場合、エラーは他の場合（$ scope.checkoperator（a）&& $ scope.result！= "" "&& $ scope.result！=" error "&& $ scope.isopt）{$ scope.flag = fals; $ scope.num.push（$ scope.result）; $ scope.operation（a）; //オペレーターを1回クリックした後、オペレーターが再度クリックされる状況を無視する必要があります。 $ scope.isopt = false; }このブランチは最も複雑なブランチです。つまり、入力が演算子である場合、操作を実行することを意味します。このブランチを入力するには、最初にFalseにフラグを設定する必要があります。これは、次回の数を入力することです。これは、現在の表示結果を入力する代わりに数値を再入力することです。
次に、最初に番号スタックを入力するために計算されている数字として現在表示されている数値を入れます。 operation方法は操作方法です。今回はオペレーターがクリックされたため、次回クリックすると、このオペレーターを無視し、ISOPTをfalseに設定する必要があります。
操作コードは次のとおりです
//現在の入力オペレーターとオペレータースタックトップオペレーターの優先度を比較します//トップオペレーターの優先度が小さい場合、現在の演算子はスタックに置かれ、計算しません。 //それ以外の場合、トップ演算子がスタックに置かれ、2つの要素の数字スタックに連続してスタックに置かれ、//現在の演算子がスタックに置かれます。 $ scope.operation = function（current）{//オペレータースタックが空の場合、現在の演算子をスタックに直接配置します（！$ 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メソッドは、優先度を決定し、2つのパラメーターを受信するために使用されます。 1つ目は現在受信されたオペレーターで、2つ目はスタックのトップオブスタックオペレーターです。上記のルールに従って現在のオペレーターの優先度が高い場合、オペレーターはスタックに直接置かれます。現在の演算子の優先度がスタック演算子の上部よりも小さい場合は、計算を実行して計算機の表示を変更する必要があります。操作番号のスタックの上部にある2つの要素が順番にポップアップされます。1つの操作の2つの動作番号があり、オペレータースタックのスタックの上部がこの操作の演算子としてポップアップされ、計算方法が操作の計算方法で呼び出されます。
メソッドコードは次のとおりです
//結果関数の計算$ scope.calculate = function（左、オペレーター、右）{switch（operator）{case " +"：$ scope.result = $ scope.format（number（左） + number（右））; $ scope.num.push（$ scope.result）;壊す; case " - "：$ scope.result = $ scope.format（number（左） - number（右））; $ scope.num.push（$ scope.result）;壊す; case "×"：$ scope.result = $ scope.format（number（左） * number（右））; $ scope.num.push（$ scope.result）;壊す; case "÷"：if（right == 0）{$ scope.result = "error"; $ scope.init（）; } else {$ scope.result = $ scope.format（number（左） / number（右））; $ scope.num.push（$ scope.result）; } 壊す;デフォルト：break; }};このメソッドは、左操作番号、中央演算子、および右操作番号の3つのパラメーターを受け入れ、結果を変更して結果を変更、減算、乗算、および分割操作を表示し、計算結果を計算番号のスタックに配置します。ここでは、計算が分割であり、除数が0の場合、エラーが発生し、ディスプレイエラーが発生し、すべての状態がクリアされることに注意する必要があります。
1つの操作が完了した後、オペレータースタックの状態と数字スタックが変更され、現在のキー電流値はスタックに入れられていません。したがって、上記のプロセスを優先比較のために繰り返し、操作を実行する必要があります。実際、オペレーターのスタックが空になるか、現在のオペレーターの優先度がオペレータースタックのトップよりも高いまで、これは再帰プロセスです。 ISPRIメソッドは、演算子の優先度を決定するために使用されます。
コードは次のとおりです。
//現在の演算子が最後よりも優先度が高いかどうかを判断します。 } else {if（current == "×" || current == "÷"）{if（last == "×" || last == "÷"）{return false; } else {return true; }} else {return false; }}};判断規則は前に説明されています。
さらに、入力シンボルが追加、減算、乗算、および分割の4つの演算子シンボルであるかどうかを判断するためのcheckOperator法があります。
コードは次のとおりです。
//現在のシンボルが操作可能なシンボル$ scope.Checkoperator = function（opt）{if（opt == "+" || opt == " - " || opt == "×" || opt == "÷"）{return true; } falseを返します。 }もしそうなら、trueを返し、それ以外の場合はfalseを返します。
これまでのところ、入力はまだ数値に等しいブランチがあります
コードは次のとおりです（showResultメソッドに接続）
//クリックされたものが等記号である場合、（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に設定し、次に番号を入力したときにインターフェイスを再表示することができ、現在表示されている数値を計算番号としてスタックに配置する必要があります。次に、オペレーターのスタックが停止する前に空になるまで、継続的なスタッキング操作を実行する必要があります。
要約します
上記は、実装の主なコードとプロセスです。多くのブランチコードがあるため、すべてのブランチが一度に与えられ、詳細に説明することはできません。したがって、ShowResultメソッドは分離されており、適応できない場合があります。執筆はラッシュであり、テストするのにあまり時間がかからなかったので、いくつかのバグがあるかもしれません。それらを指摘してください。同時に、レベルが限られているため、この方法は最高ではないかもしれません。一緒にコミュニケーションと学ぶためのより良い計画を提供するように歓迎~~上記は、この記事の全体的な内容です。それが皆の勉強や仕事に助けをもたらすことを願っています。