AngularJS 예제

본인이 직접 시도해 보세요

온라인에서 예제를 편집하고, 버튼을 클릭하여 결과를 확인할 수 있습니다.

AngularJS 예제

<div ng-app="">
<p>이름: <input type="text" ng-model="name"></p>
<p>당신이 썼습니다: {{ name }}</p>
</div>

본인이 직접 시도해 보세요

AngularJS 기본

• 제일 처음 AngularJS 지시 명
• 제일 처음 AngularJS 지시 명 (HTML5 표준에 맞춰)
• 제일 처음 AngularJS 표현식
• 변수를 사용한 간단한 AngularJS 표현식
• 제일 처음 AngularJS 컨트롤러

기본 AngularJS 소개

AngularJS 표현식

• 간단한 표현식
• ng-app 없는 표현식
• 숫자를 포함하는 표현식
• ng-bind를 사용하여 숫자 바인딩
• 문자열을 포함하는 표현식
• ng-bind를 사용하여 문자열 바인딩
• 객체를 포함하는 표현식
• ng-bind를 사용하여 객체 바인딩
• 배열을 포함하는 표현식
• ng-bind를 사용하여 배열 바인딩

표현식 소개

AngularJS 모듈

• AngularJS 컨트롤러
• 파일 내 모듈과 컨트롤러
• AngularJS를 언제 로드할까요?

모듈 소개

AngularJS 지시

• AngularJS 지시
• ng-model 지시 명
• ng-repeat 지시 명 (배열에 사용)
• ng-repeat 지시 명 (객체에 사용)
• 새 지시 생성
• 새 지시로 요소 사용
• 새 지시로 속성 사용
• 새 지시로 클래스 사용
• 새 지시로 주석 사용
• 제한된 지시

지시 소개

AngularJS 모델

• AngularJS 모델
• 양방향 바인딩 모델
• 검증된 모델
• 양식 및 현재 검증 상태
• 필드가 유효하지 않을 때 CSS 클래스 설정

모델 소개

AngularJS 컨트롤러

• AngularJS 컨트롤러
• 컨트롤러 속성
• 컨트롤러 함수
• JavaScript 파일에서 컨트롤러 I
• JavaScript 파일에서 컨트롤러 II

컨트롤러 소개

AngularJS 스코프

• AngularJS 스코프
• 스코프는 동기화됩니다
• 다른 스코프
• 루트 스코프

스코프 소개

AngularJS 필터

• 표현식 필터 uppercase
• 표현식 필터 lowercase
• 표현식 필터 currency
• 지시 필터 orderBy
• 입력 필터

필터 소개

AngularJS XMLHttpRequest

• 정적 JSON 파일 읽기

XMLHttpRequest 소개