머리말
우선, AngularJS의 기본 프로젝트를 만드는 것에 대해 이야기하지 마십시오. 스캐 폴딩 도구 Yeoman을 사용하여 직접 생성하는 것이 가장 좋습니다. 그러한 환경이 없으면 물론 AngularJS 파일을 직접 다운로드하여 프로젝트를 소개 할 수도 있습니다.
자세한 예제 설명
main.js는 프로젝트의 기본 JS 파일입니다. 모든 JS는이 파일로 작성되었습니다. 초기화 후 파일의 JS 코드는 다음과 같습니다.
Angular .Module ( 'calculatorApp', [ 'nganimate', 'ngcookies', 'ngresource', 'ngroute', 'ngsanitize', 'ngtouch']) .controller ( 'mainctrl', function ($ scope) {$ scope.result = "; $ scope.data = {$ scope.data = { "1": [ "ac", "+/-", "%", "÷"], "2": [ "7", "8", "9", "×"], "3": [ "4", "5", "6", "-"], "4": [ "1", "2", "+"], "5": "0", ","));여기서 결과는 계산 결과를 양방향 바인딩으로 바인딩하는 데 사용되며 데이터는 계산기 키보드의 숫자와 기호입니다.
이 프로젝트와 관련된 모든 CSS 코드는 다음과 같습니다.
*{마진 : 0; 패딩 : 0;} Body {Padding-Top : 20px; Padding-Bottom : 20px;} H1 {Text-Align : Center; 색상 :#3385ff;}. 메인 {마진 : 20px 자동; 국경 : 1px Solid #202020; 국경 바닥 : 없음; 너비 : 60%; 높이 : 600px;}. 결과 {display : block; 너비 : 100%; 높이 : 30%; 배경 :#202020; 박스 사이징 : 국경 박스; 국경 : 없음; 패딩 : 0; 여백 : 0; 크기 조정 : 없음; 색상 : #fff; 글꼴 크기 : 80px; 텍스트 정렬 : 맞습니다. 라인 높이 : 270px; 오버플로 : 숨겨진; 배경 클립 : Border-Box;}. Row {높이 : 14%; 배경 : #d7d8da; 박스 사이징 : 국경 박스; 국경-바닥 : 1px Solid #202020; 오버플로 : 숨겨진;}. col {높이 : 100%; 박스 사이징 : 국경 박스; 국경 권리 : 1px 솔리드 #202020; 플로트 : 왼쪽; 색상 : #202020; 글꼴 크기 : 28px; 텍스트 정렬 : 센터; 선-높이 : 83px;}. 정상 {너비 : 25%;}. end-no {너비 : 25%; 국경 오른쪽 : 없음; 배경 : #F78E11; 색상 : #fff;}. Zero {너비 : 50%;}. history {배경 : #3385ff; 색상 : #fff; 글꼴 크기 : 22px; 텍스트 정렬 : 센터;}그런 다음 HTML 레이아웃은 다음과 같습니다.
<body ng-app = "calculatorapp"> <h1> iOS8의 계산기 </h1> <hr/> <p> {history.join ( "")}}}}}} </p> <div> <textArea ng-model = "result"> </textarea> <div ng-repeat = "div ng-repeat ="a item " ng-class = "showclass ($ index, a)"ng-click = "showResult (a)"> {{a}} </div> </div> </div> </body> 여기서 클래스 기록의 P 태그는 입력 레코드를 표시하는 데 사용됩니다. 즉, 결과를 쉽게 볼 수 있도록 모든 키가 표시됩니다. 히스토리는 현재 범위 아래의 배열이며 나중에 설명됩니다. 여기서 TextArea는 주로 양방향 바인딩 기능을 사용하는 계산 결과의 디스플레이 화면으로 사용됩니다. 동시에, 계산기의 각 키 및 인터페이스 요소는 데이터 객체를 통해 반복하여 생성됩니다. showClass 메소드는 스코프 이하의 메소드이며, 불규칙 인터페이스 디스플레이 요소의 클래스 속성을 얻는 데 사용됩니다. 나중에 설명 될 것입니다. showResult 메소드는 키에 응답하는 주요 방법입니다. 키에 대한 모든 응답은이 방법을 통해 얻을 수 있으며 나중에 자세히 설명 할 것입니다.
쇼 클래스 방법 코드는 다음과 같습니다.
// 계산기 스타일을 표시 $ scope.showClass = function (index, a) {if (a == 0) {return "Zero"; } return index == 3 || a == "="? "end-no": "normal"; };이 방법은 주로 주황색으로 표시 될 각 행의 마지막 열을 다루고 0을 표시하는 키는 특수 처리를 위해 두 개의 셀을 차지해야합니다.
지금까지 계산기 인터페이스가 완전히 구현되었습니다
렌더링은 다음과 같습니다.
다음은 키에 대한 응답을 실현해야합니다. 키에는 숫자 키, 운영자 키 및 AC 키가 포함됩니다. 각 키 프레스마다 응답이 다르며 키간에 연결됩니다.
코드를보다 쉽게 설명하기 위해 방법을 사용하여 ShowResult 메소드의 코드를 세그먼트로 제공 한 다음 자세히 설명합니다.
우선, 제어 및 스토리지를 위해 여러 변수를 추가해야합니다.
// 계산에 사용되는 숫자 스택 $ scope.num = []; $ scope.history = []; // 연산자 스택 $ scope.opt = []; // 계산기 $ scope.result = ""의 계산 결과; // 계산기 $ scope.result = ""의 결과; // 다시 표시를 시작 하는지를 의미합니다. 참된 것은 다시 표시하지 않는 것을 의미합니다. 거짓은 현재 출력을 지우고 숫자 $ scope.flag = true를 redisplay하는 것을 의미합니다. // 이제 연산자를 입력 할 수 있는지 여부를 의미합니다. 그렇지 않으면 false $ scope.isopt = true입니다.
NUM 배열은 실제로 스택이며 사용자가 입력 한 숫자를받는 데 사용됩니다. 특정 사용법은 나중에 설명됩니다. 히스토리 어레이는 사용자가 입력 한 모든 키입니다. 누를 때마다 키의 기호 또는 숫자가 스택에 넣은 다음 바인딩을 사용하여 인터페이스에 실시간으로 표시됩니다. OPT 어레이는 사용자가 연산자 입력을 수신하는 데 사용되는 또 다른 스택입니다. 특정 사용법은 나중에 설명됩니다. 깃발은 깃발입니다. 사실 인 경우, 숫자를 누르는 동안 누르는 숫자는 현재 표시된 숫자의 일부이며 그 뒤에 표시해야합니다. 예를 들어, 현재 인터페이스가 12로 표시되면 누름 3이 판단됩니다. 사실이라면 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)) {// 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 코드 (계속)
// else 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 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 부분이 연결되어 있음)
// 클릭 된 연산자와 현재 디스플레이 결과가 비어 있지 않은 경우 ($ scope.checkoperator (a) && $ scope.result! = ""&& $ scope.result! = "error"&& $ scope.isopt) {$ scope.flag = false; $ scope.num.push ($ scope.result); $ scope.operation (a); // 연산자를 한 번 클릭 한 후에는 연산자가 다시 클릭되는 상황을 무시해야합니다. $ scope.isopt = false; }이 분기는 가장 복잡한 지점이므로 입력이 연산자 인 경우 작업을 수행해야합니다. 이 분기를 입력하려면 다음 번에 숫자를 입력하는 것이 False로 플래그를 False로 설정해야합니다. 이는 현재 디스플레이 결과를 입력하는 대신 숫자를 다시 입력하는 것입니다.
그런 다음 현재 표시된 숫자를 계산 된 숫자로 숫자 스택을 먼저 입력하도록하십시오. operation 방법은 작동 방법입니다. 이번에 연산자가 클릭되었으므로 다음에 클릭하면이 연산자를 무시하고 ISOPT를 False로 설정해야합니다.
작업 코드는 다음과 같습니다
// 현재 입력 연산자와 연산자 스택 상단 연산자의 우선 순위를 비교하십시오. // 상단 연산자의 우선 순위가 작 으면 현재 연산자가 스택에 올려지고 계산하지 않습니다. // 그렇지 않으면, 상단 연산자가 스택에 놓고, 숫자 스택은 두 개의 요소에 대한 스택에 올려 놓고 // // 현재 연산자가 스택에 놓습니다. $ scope.operation = function (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 (현재); }};이 메소드는 현재 입력 연산자를 매개 변수로 받아들입니다. 핵심 아이디어는 현재 운영자가 수신된다는 것입니다. 연산자 스택이 비어 있으면 현재 연산자가 스택에 올려 놓고이 경우 다른 작업을 수행 할 필요가 없습니다. 현재 연산자 스택이 비어 있지 않으면 현재 연산자 스택의 상단 요소가 팝업되어 현재 수신 된 연산자와 최상위 작업자가 우선 순위가 부여됩니다 (곱셈 및 부서의 우선 순위는 추가 및 뺄셈보다 크며 상단 운영자는 처음 입력 한 경우 동일한 우선 순위의 우선 순위가 부여됩니다). 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); 부서지다; 사례 "÷": if (right == 0) {$ scope.result = "error"; $ 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; }}};판단 규칙은 앞에서 설명했습니다.
또한 입력 기호가 추가, 뺄셈, 곱셈 및 분할의 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로 설정하여 다음에 숫자를 입력 할 때 인터페이스가 RedisPlay를 허용하고 현재 표시된 숫자를 계산 번호로 스택에 넣어야합니다. 그런 다음 연산자 스택이 멈출 때까지 비어있을 때까지 연속 스태킹 작업을 수행해야합니다.
요약
위는 구현의 주요 코드 및 프로세스입니다. 많은 분기 코드가 있으므로 모든 지점은 한 번에 제공되며 자세히 설명 할 수 없습니다. 따라서 ShowResult 방법이 분리되어 적응할 수 없을 수 있습니다. 글이 서두르고 테스트하는 데 너무 많은 시간이 걸리지 않았기 때문에 몇 가지 버그가있을 수 있습니다. 동시에, 제한된 수준으로 인해이 방법이 최고가 아닐 수 있습니다. 함께 의사 소통하고 함께 배울 수있는 더 나은 계획을 세우는 데 오신 것을 환영합니다 ~~ 위의 내용은이 기사의 전체 내용입니다. 모든 사람의 공부 나 일에 도움이되기를 바랍니다.