[Angular.js][앵귤러js] AngularJS 8일차 [Forms, Events, 폼,이벤트]

안녕하세요 슬릭데브 입니다 ^^

오늘은 앵귤러 forms(폼)에 사용되는 이벤트를 배워보겠습니다.

나중에 로그인 화면 만들때 중요한 부분입니다.

---

보통 버튼이 있으면 누르게 되고 그 다음엔 어떡해 해야할지 궁금했는데 이벤트를 통해서 배울예정입니다.

Events

• ng-click : 클릭시 작동됩니다.
• ng-dbl-click : 더블 클릭시 작동됩니다.
• ng-mousedown : 마우스를 꾸욱 누르고 있으면 작동됩니다.
• ng-mouseup : 마우스를 눌렀다가 때면 즉, 클릭이 끝날때 작동됩니다.
• ng-mouseenter : 커서를 해당부분에 올려놓으면 작동됩니다.
• ng-mouseleave : 커서가 해당부분에서 나가면 작동됩니다.
• ng-mousemove : 마우스가 해당부분에서 움직일때마다 작동됩니다.
• ng-mouseover : ng-mouseenter 와 비슷합니다.
• ng-keydown : 키보드 키를 누르고 있을때 작동됩니다.
• ng-keyup : 키보드 키를 눌렀다가 때면 작동됩니다.
• ng-keypress : 키보드 키를 눌렀다 때면 작동됩니다.
• ng-change : 입력하거나, 데이터가 바뀔때마다 작동됩니다.

Form Properties (폼 특성)

• $valid : (boolean) 정해진 규칙을 기반으로 맞는지 확인 
• $invalid : (boolean) 정해진 규칙을 기반으로 틀린지 확인
• $pristine : (boolean)  입력값이 변경되지 않은지 확인
• $dirty : (boolean) 입력값이 변경됐는지 확인
• $error : 에러를 보여줍니다.

특성은 더 있는데 이게 제일 많이 쓰이는거 같습니다.

그럼 오늘도 변함없이 예제를 해보겠습니다.

---

어제 메뉴판을 만들었는데 그 메뉴판에 Event 와 Form 특성을 추가해 보겠습니다.

이렇게 Reset 버튼과 검색 버튼을 추가했습니다.

Reset 버튼을 누르면 식당이름과, 웹사이트 주소, 가격이 원래대로 복구되어야 합니다.

그리고 식당이름과 웹사이트 주소를 form property 를 이용해 validate 을(를) 합니다.

위 그림과 같이 검색을 누르면 가격이 할인가격으로 바뀌어야 합니다.

위 그림과 같이 마우스를 검색버튼 위로 올려주면 옆에 "할인가 보기" 라고 떠야 합니다.

---

자 그럼 코딩을 해봅시다.

mainApp.js

위 그림과 같이 mainApp.js 는 이렇게 저장합니다.

menuController.js

빨간 박스에 있는 부분이 새로 추가된 부분입니다.

1. Website 주소를 리턴값으로 돌려주는 function
2. Reset 과 Search function은 Reset 과 검색 버튼을 눌렀을 경우 작동합니다.
3. HoverIn, HoverOut 은 마우스로 검색버튼 위로 다가가면 작동합니다.

searchrestaurant.html

헤드태그 입니다. 빨간색 밑줄은 변경된 부분입니다.

빨간색 박스 부분은 새로 추가된 스타일링 입니다. 

마우스를 검색버튼 위로 다가갈때 글씨가 나오는 애니메이션을 넣어줬습니다.

바디태그 입니다. 빨간색 박스 부분은 새로 추가된 부분입니다.

웹사이트 주소를 보여주는 부분입니다.

사진이 작게나온 느낌이네요...

이 부분에서는 mouseover, mouseleave, click 이벤트를 썼습니다.

어제 배운 ng-show를 활용해서 마우스가 검색버튼 위로 가면 옆에 글씨가 나오게 됩니다.

아이콘 이미지는 CDN을 통해서 가져왔습니다. 

<img> 태그에 CDN 주소를 적으면 됩니다.

---

오늘은 Form 과 Event의 대해서 배웠습니다.

이제 조금만 더 배우면 데이터베이스까지 연결하고 제대로 된 앱을 만들수 있겠습니다.

감사합니다.

//슬릭데브