Programming/AngularJS
-
[AngularJS] (12) Table 처리 | ng-repeat, ng-if, index, odd, evenProgramming/AngularJS 2021. 11. 24. 19:01
AngularJS로 Table을 처리하는 방법을 살펴보자 - tr태그를 ng-repeat으로 반복시킬 수 있다 - ng-if로 적용할 tr태그를 선택할 수 있다 - $index로 행의 인덱스를 지정할 수 있다- $odd, $even으로 현재 $index의 짝/홀수 여부를 판단할 수 있다 > ng-repeat으로 동일한 형태의 태그를 반복 기입할 필요없이 한번에 표현할 수 있다 > ng-if로 어떤 td태그를 사용할 것인지 선택할 수 있다 - $odd : 현재 $index의 값이 홀수이면 true - $even : 현재 $index의 값이 짝수이면 true > Ajax 통신으로 받아온 데이터로 테이블 구성
-
[AngularJS] (11) http 서비스 | http.get(), http.post(), http({})Programming/AngularJS 2021. 11. 24. 17:09
$http는 AngularJS가 제공하는 핵심 서비스 중 하나이다 Ajax 통신으로 화면전환없이 응답받은 데이터를 처리할 수 있게 하는 기능을 가지고 있다 $http 서비스의 주요 메서드 - $http.get(url) - $http.post(url) - $http({url: ..., method: ...})) > http 서비스로 요청시 응답받을 data1.html > get(), post() 함수로 요청을 보낸 뒤에 then()으로 응답받은 결과를 처리 > 응답결과 출력 > $http({})로 method 및 url을 설정하여 위와 동일한 결과를 얻을 수도 있음 > JSON형태의 응답 데이터 data2.html > 응답 결과를 ng-repeat을 이용해 처리 > 응답 결과 출력
-
[AngularJS] 오늘 하루 보지 않기 팝업 구현Programming/AngularJS 2021. 11. 22. 17:26
1. 메인 페이지 (index.html) - 로그인 후에 보여질 메인페이지. - 페이지 로드와 동시에 비밀번호 만료 팝업창을 띄운다 - cookie를 확인하여 '팝업창 무시' cookie값이 true인 경우 팝업창을 띄우지 않는다. > ng-app, ng-controller 및 ng-init 세팅 >$cookies 서비스 사용을 위한 스크립트 삽입 및 cookie 사용 > 쿠키값 존재하지 않는 경우 팝업창 출력 2. 비밀번호 만료 7일전 팝업창 페이지 (PwdExpirePopup.html) - 메인 페이지 위에 보여질 팝업창 - 현재 유저의 비밀번호 만료가 몇 일 남았는지를 보여준다. - 비밀번호 재설정 / 오늘 하루 보지 않기 버튼을 배치한다. - 오늘 하루 보지 않기 버튼을 클릭한 경우, 24시간동안..
-
[AngularJS] (10) 서비스 | location, get, timeout, interval, app.service()Programming/AngularJS 2021. 11. 22. 03:22
목차 (1) 기본 웹 서비스 개발환경 구축 (2-1) 기본 예제 (2-2) AngularJS 템플릿 만들고 적용하기 (3) 표현식 | {{data}} (4) 모듈 | angular.module("appName", []) (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat (6) 모델 | ng-model, ng-show, valid, dirty, touched (7) Controller (8) scope 객체 | scope, rootScope (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number (10) 서비스 | location, get, timeout,..
-
[AngularJS] (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, numberProgramming/AngularJS 2021. 11. 21. 19:44
목차 (1) 기본 웹 서비스 개발환경 구축 (2-1) 기본 예제 (2-2) AngularJS 템플릿 만들고 적용하기 (3) 표현식 | {{data}} (4) 모듈 | angular.module("appName", []) (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat (6) 모델 | ng-model, ng-show, valid, dirty, touched (7) Controller (8) scope 객체 | scope, rootScope (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number (10) 서비스 | location, get, timeout,..
-
[AngularJS] (8) scope 객체 | scope, rootScopeProgramming/AngularJS 2021. 11. 21. 16:40
목차 (1) 기본 웹 서비스 개발환경 구축 (2-1) 기본 예제 (2-2) AngularJS 템플릿 만들고 적용하기 (3) 표현식 | {{data}} (4) 모듈 | angular.module("appName", []) (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat (6) 모델 | ng-model, ng-show, valid, dirty, touched (7) Controller (8) scope 객체 | scope, rootScope (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number (10) 서비스 | location, get, timeout,..
-
[AngularJS] (7) ControllerProgramming/AngularJS 2021. 11. 21. 14:10
목차 (1) 기본 웹 서비스 개발환경 구축 (2-1) 기본 예제 (2-2) AngularJS 템플릿 만들고 적용하기 (3) 표현식 | {{data}} (4) 모듈 | angular.module("appName", []) (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat (6) 모델 | ng-model, ng-show, valid, dirty, touched (7) Controller (8) scope 객체 | scope, rootScope (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number (10) 서비스 | location, get, timeout,..
-
[AngularJS] (6) 모델 | ng-model, ng-show, valid, dirty, touchedProgramming/AngularJS 2021. 11. 20. 22:56
목차 (1) 기본 웹 서비스 개발환경 구축 (2-1) 기본 예제 (2-2) AngularJS 템플릿 만들고 적용하기 (3) 표현식 | {{data}} (4) 모듈 | angular.module("appName", []) (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat (6) 모델 | ng-model, ng-show, valid, dirty, touched (7) Controller (8) scope 객체 | scope, rootScope (9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number (10) 서비스 | location, get, timeout,..