ANGULAR 자습서: 간단한 계산기

이 게시물에서는 Angular에서 간단한 계산기를 빌드하는 방법을 살펴보겠습니다. 당신은 응용 프로그램의 라이브 버전을 볼 수 있습니다 여기 . 앱용 GitHub 리포지토리는 찾을 수 있습니다. 여기 .

프로젝트 설정

시스템에 Angular CLI가 설치되어 있다고 가정하면(이에 대한 지침을 찾을 수 있습니다. 여기 ), 프로젝트 생성부터 시작하겠습니다. 이를 위해 터미널(또는 Windows의 경우 명령 프롬프트)을 열고 프로젝트 폴더가 위치할 디렉토리로 이동한 후 다음 명령을 실행합니다.

|_+_|

이제 해당 명령의 'angularCalc'는 내 프로젝트의 이름입니다. 이것은 순전히 당신의 선택입니다. 계속해서 다음 단계는 프로젝트에 부트스트랩을 설치하는 것입니다. 모든 CSS를 직접 작성하는 것보다 항상 프로젝트에 부트스트랩을 두는 것이 좋습니다. 프로젝트에서 부트스트랩 스타일 설정에 대한 빠른 가이드를 찾을 수 있습니다. 여기 . Bootstrap을 사용하고 있기 때문에 응용 프로그램도 반응형으로 만들었습니다.

설정이 완료되었습니다. 생성하자!

HTML

이 섹션에서는 |_+_| 파일. 우리 계산기는 다음과 같은 기능을 갖춘 매우 간단한 계산기입니다.

매틱 구매처

입력한 키가 기록되고 결과가 표시되는 메인 디스플레이
기본 디스플레이에 오류가 표시되는 동안 계산이 표시되는 기본 디스플레이 상단의 작은 섹션인 하위 디스플레이
누를 때 디스플레이를 지우는 AC(All Clear) 키
+(더하기), —(빼기), x(곱하기) 및 /(나누기)에 대한 4개의 연산자 키
계산을 수행하는 '=' 키
10진수 입력을 위한 '.' 키

먼저 다음과 같이 생성하는 디스플레이가 있습니다.

|_+_|

여기서 우리는 메인 디스플레이와 서브 디스플레이의 텍스트를 설정하기 위해 문자열 보간법을 사용했습니다. 이는 |_+_| 및 |_+_|변수.

다음에 필요한 것은 다음 코드를 통해 빌드하는 키패드입니다.

|_+_|

보시다시피 모든 키에는 공통 클래스 |_+_|가 있고 각 버튼 또는 then 집합에 고유한 클래스가 있습니다. 또한 이벤트 바인딩을 사용하고 버튼 클릭 시 트리거되는 기능을 할당했습니다. 이러한 함수가 수행하는 작업과 클래스가 수행하는 작업은 이후 섹션에서 살펴보겠습니다.

그럼 멋지다. 이제 페이지에 매우 못생긴 숫자와 div 세트가 생겼습니다. 걱정하지 마세요. 곧 완벽하게 변신할 것입니다.

은행 현금 앱에서 이체를 거부했습니다.

CSS

|_+_|로 넘어갑시다. 그럼 이제 계산기에 스타일을 적용할 시간입니다. 우리는 HTML의 모든 클래스에 대한 스타일을 정의합니다.

다음은 HTML에서 사용되는 주요 클래스입니다. 이렇게 하면 계산기가 훨씬 더 좋아 보이고 최종 제품에 더 가까워집니다.

|_+_|

물론 이것들은 CSS에 관한 한 자명합니다. 물론 계산기에 필요한 모양을 갖추려면 몇 가지 클래스가 더 필요합니다. 그 부분은 여러분에게 맡기겠습니다. 상상력을 발휘 해봐.

그리고 마지막으로 사업의 끝 — Typescript

그리고 여기에 |_+_|로 끝납니다. 여기에서 계산기에 대한 모든 실제 프로그래밍 논리를 수행하고 대부분의 기반을 다루기 위해 계산기의 기본 요구 사항을 넘어서는 기능을 여기에서 사용했습니다.

먼저 선언하고 초기화할 다음 변수가 있습니다. 곧 사용할 것입니다.

|_+_|

변수가 준비되면 계산기의 각 키 누름을 처리하는 함수 |_+_|를 볼 수 있습니다.

|_+_|

숫자 및 연산자 키를 누르면 트리거되는 이 기능은 계산기의 입력을 처리합니다. 먼저 누른 키가 오퍼레이터용인지 확인합니다. 이 안에 |_+_| 블록에서는 이전에 입력한 키도 연산자인지 확인하고 그렇다면 두 개의 연산자가 연속적으로 입력되지 않도록 실행을 중지합니다.

노드 js 대 io js

다음에는 |_+_| 블록에서 기록된 첫 번째 키 항목이 연산자가 아닌지 확인합니다. 이러한 검사가 통과되면 현재 키를 |_+_|로 설정하고 그 이전의 모든 입력을 |_+_|로 설정합니다. |_+_| 변수는 연산자가 이미 입력되었는지 여부를 확인하는 데 사용됩니다.

누른 키가 연산자가 아닌 것으로 밝혀지면 키 항목을 |_+_|에 추가하여 메인 디스플레이에 표시합니다. 또한 |_+_| 계산기처럼 최대 10자만 입력했는지 확인하십시오.

느슨한 구글 시트

다음으로, |_+_|함수는 계산기를 잘 작동시켜 답을 계산합니다.

|_+_|

여기서 함수는 꽤 길어 보이지만 보시다시피 그렇게 복잡하지는 않습니다.

먼저 |_+_| |_+_|로 분할하고 |_+_|를 분할하여 두 번째 피연산자를 추출합니다. |_+_| 함수를 만들고 |_+_|에 할당합니다. 다음 몇 줄에 걸쳐 일어나는 일은 매우 간단합니다. 계산을 수행하고 답을 |_+_|로 설정하고 계산 문자열을 |_+_|로 이동합니다. 계산 범위를 제한하고 오류 메시지를 표시하는 조건도 포함했습니다.

이 계산이 완료되면 |_+_| 변수를 |_+_|로 변경합니다. 우리는 코드의 다른 부분에서 이 플래그를 사용하고 있습니다.

함수 |_+_|도 작성해야 합니다. AC 키를 누르면 실행됩니다. 또한 이 작업이 완료되면 보고 싶어하는 사람에게 보여주기 좋은 계산기가 준비되었습니다.

이것으로 Angular에서 작은 계산기를 구축하는 방법을 설명한 이 기사를 마무리합니다. 솔직히 이 앱은 Angular를 강력하고 사랑받는 프런트 엔드 개발 프레임워크로 만드는 개념을 거의 사용하지 않습니다. 그럼에도 불구하고 이 응용 프로그램은 기본 폴더 구조, 프로젝트 설정 등에 익숙해지고 Angular 구성 요소를 구성하는 HTML, CSS 및 TS의 조합을 쉽게 사용할 수 있도록 도와줍니다.

우리가 이미 가지고 있는 기능을 자유롭게 개선하고 어쩌면 이것을 공학용 계산기로 확장할 수도 있습니다.

--------------------------------------

읽어주셔서 감사합니다 :하트: 이 게시물이 마음에 드셨다면 모든 프로그래밍 친구와 공유하세요! 날 따라와 페이스북 | 트위터