목록AngularJs (10)

투케이2K

10. (AngularJS/앵귤러JS) AngularJS CDN 문법 참고 사이트

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [참고 사이트] ​ https://www.geeksforgeeks.org/angularjs/?ref=lbp AngularJS - GeeksforGeeks AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). www.geeksforgeeks.org
AngularJs 2022. 9. 1. 08:35
9. (AngularJS/앵귤러JS) AngularJS ng-class-even 사용해 짝수 html css class 클래스 동적 스타일 바인딩 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [소스 코드] ​ {{i.name}} [결과 출력] ​
AngularJs 2022. 9. 1. 08:33
8. (AngularJS/앵귤러JS) AngularJS toJson 사용해 자바스크립트 객체 json 직렬화 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [소스 코드] ​ {{info}} [결과 출력] ​
AngularJs 2022. 9. 1. 08:22
7. (AngularJS/앵귤러JS) AngularJS forEach 사용해 배열 데이터 반복 출력 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [소스 코드] ​ {{name}} [결과 출력] ​
AngularJs 2022. 9. 1. 08:13
6. (AngularJS/앵귤러JS) AngularJS uppercase 대문자 , lowercase 소문자 출력 및 isString , isNumber 문자 및 정수 판단 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] 대문자 : {{upper}} 소문자 : {{lower}} 문자 판단 [1] : {{string_1}} 문자 판단 [2] : {{string_2}} 숫자 판단 [1] : {{number_1}} 숫자 판단 [2] : {{number_2}} [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. ng-app : AngularJs 를 사용하겠다는 의미입니다 (특정 이름 지정 시 자바스크립트에서 controller를 사용해 데이터를 지정 및 view에 연결할 수 있음) 3. ng-controlle..
AngularJs 2021. 9. 23. 09:05
5. (AngularJS/앵귤러JS) AngularJS ng-repeat 사용해 배열 데이터 출력 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] 인덱스 : {{$index + 1}} 데이터 : {{number}} 인덱스 : {{$index + 1}} 데이터 : {{number}} 인덱스 : {{$index + 1}} 데이터 : {{number}} idx : {{info.idx}} name : {{info.name}} [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. ng-app : AngularJs 를 사용하겠다는 의미입니다 (특정 이름 지정 시 자바스크립트에서 controller를 사용해 데이터를 지정 및 view에 연결할..
AngularJs 2021. 9. 16. 16:32
4. (AngularJS/앵귤러JS) AngularJS ng-click 클릭 이벤트 적용해 컨트롤러 내부 함수 호출 및 UI 업데이트 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] 이름 : {{Name}} , 나이 : {{Age}} [결과 출력] ​ [클릭 (전)] ​ ​ [클릭 (후)] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. ng-app : AngularJs 를 사용하겠다는 의미입니다 (특정 이름 지정 시 자바스크립트에서 controller를 사용해 데이터를 지정 및 view에 연결할 수 있음) 3. ng-controller : ng-app 이름 지정 시 컨트롤러에서 $scope 데이터를 지정 및 저장 후 view 에 연결해줍니다 4. $scope : 컨트롤러 데이..
AngularJs 2021. 9. 16. 10:48
3. (AngularJS/앵귤러JS) AngularJS 모듈 컨트롤러 변수 값 동적 변경 및 UI 업데이트 실시 - 외부 JS 에서 컨트롤러 함수 호출

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] [myInfo 변수 지정] 이름 : {{Name}} , 나이 : {{Age}} [결과 출력] ​ [데이터 변경 (전)] ​ ​ [데이터 변경 (후)] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. ng-app : AngularJs 를 사용하겠다는 의미입니다 (특정 이름 지정 시 자바스크립트에서 controller를 사용해 데이터를 지정 및 view에 연결할 수 있음) 3. ng-controller : ng-app 이름 지정 시 컨트롤러에서 $scope 데이터를 지정 및 저장 후 view 에 연결해..
AngularJs 2021. 9. 16. 10:18
2. (AngularJS/앵귤러JS) AngularJS 모듈 module , 컨트롤러 controller 사용해 데이터 저장 및 호출 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] [myInfo 변수 지정] 이름 : {{Name}} , 나이 : {{Age}} [myInfo 객체 지정] 이름 : {{Data.Name}} , 나이 : {{Data.Age}} [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. Angular Js 는 html 을 확장해서 사용할 수 있습니다 3. Angular Js 는 단일 페이지 응용 프로그램(SP)에 적합합니다 (주기적 ajax 통신으로 데이터만 새로 교체) 4. Angular Js 는 자바스크립트 client 측에서 MVC/MVV..
AngularJs 2021. 9. 16. 08:25
1. (AngularJS/앵귤러JS) 기본 AngularJS 설명 및 문법 구문 수행 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : AngularJS [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] 색상 변경하기 일반 더하기 : {{10 + 10}} 변수 더하기 : {{mySample1 + mySample2}} 변수 이름 : {{myName}} , 변수 나이 : {{myAge}} json 이름 : {{jsonObj.Name}} , json 나이 : {{jsonObj.Age}} 배열[0]번지 : {{arr[0]}} , 배열[1]번지 : {{arr[1]}}, 배열[2]번지 : {{arr[2]}} [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. Angular Js 는 html 을 ..
AngularJs 2021. 9. 15. 18:16
Prev 1 Next