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,..