AngularJS 입문 튜토리얼 Hello World!_AngularJS
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-05-16 16:28:361542검색
AngularJS 학습을 시작하는 가장 좋은 방법은 클래식 애플리케이션 "Hello World!"를 만드는 것입니다.
1. 즐겨 사용하는 텍스트 편집기를 사용하여 helloworld.html과 같은 HTML 파일을 만듭니다.
2. 아래 소스 코드를 HTML 파일에 복사하세요.
3. 웹 브라우저에서 이 HTML 파일을 엽니다.
소스코드:
머리>
안녕하세요 {{'World'}}!
본문>
효과를 보려면 브라우저에서 위 코드를 실행하세요.
이제 코드를 자세히 살펴보고 무슨 일이 일어나는지 살펴보겠습니다. 페이지가 로드되면 ng-app 태그는 AngularJS에 전체 HTML 페이지를 처리하고 애플리케이션을 부트스트랩하도록 지시합니다.
이 줄은 AngularJS 스크립트를 로드합니다.
(AngularJS가 전체 HTML 페이지를 처리하는 방법에 대한 자세한 내용은 Bootstrap을 참조하세요.)
마지막으로 태그의 본문 텍스트는 UI에 인사말을 표시하기 위해 적용된 템플릿입니다.
안녕하세요 {{'World'}}!
이중 중괄호 {{}}로 표시된 내용은 인사말에 바인딩된 표현식입니다. 이 표현식은 간단한 문자열 'World'입니다.
다음으로 좀 더 흥미로운 예를 살펴보겠습니다. AngularJS를 사용하여 인사말 텍스트에 동적 표현을 바인딩하는 것입니다.
안녕하세요 AngularJS World!
이 예는 AngularJS의 양방향 데이터 바인딩을 보여줍니다.
1. 이전에 만든 helloworld.html 문서를 편집합니다.
2. 아래 소스 코드를 HTML 파일에 복사하세요.
3. 브라우저 창을 새로 고칩니다.
소스코드:
머리>
귀하의 이름:
> 안녕하세요, {{이름 || '세계'}}님!
본문>
효과를 보려면 브라우저에서 위 코드를 실행하세요.
이 예에서 주의해야 할 몇 가지 중요한 사항이 있습니다.
1. 텍스트 입력 명령
2. 이중 중괄호 태그는 인사말 텍스트에 yourname 모델 변수를 추가합니다.
3. 이 애플리케이션에는 추가 이벤트 리스너를 등록하거나 이벤트 핸들러를 추가할 필요가 없습니다!
이제 입력 상자에 이름을 입력해 보세요. 입력한 이름이 업데이트되어 인사말에 즉시 표시됩니다. 이것이 AngularJS의 양방향 데이터 바인딩 개념입니다. 입력 상자에 대한 변경 사항은 모델 변수에 즉시 반영되고(한 방향), 모델 변수에 대한 변경 사항은 인사말 텍스트에 즉시 반영됩니다(다른 방향).
AngularJS 애플리케이션 분석
이 섹션에서는 AngularJS 애플리케이션의 세 가지 구성 요소를 설명하고 이러한 구성 요소가 모델-뷰-컨트롤러 디자인 패턴에 매핑되는 방법을 설명합니다.
템플릿
템플릿은 애플리케이션의 보기를 나타내는 HTML 및 CSS로 작성하는 파일입니다. AngularJS 컴파일러에 대한 지침으로 HTML에 새 요소와 속성 태그를 추가할 수 있습니다. AngularJS 컴파일러는 완전히 확장 가능합니다. 즉, AngularJS를 사용하면 HTML로 자신만의 HTML 마크업을 구축할 수 있습니다!
애플리케이션 로직(Logic)과 동작(Behavior)
애플리케이션 로직과 동작은 JavaScript로 정의하는 컨트롤러입니다. AngularJS는 AngularJS에 이미 내장되어 있으므로 추가 리스너나 DOM 컨트롤러를 작성할 필요가 없다는 점에서 표준 AJAX 애플리케이션과 다릅니다. 이러한 기능을 통해 애플리케이션 논리를 쉽게 작성, 테스트, 유지 관리 및 이해할 수 있습니다.
모델 데이터(Data)
모델은 AngularJS 범위 개체의 속성에서 파생됩니다. 모델의 데이터는 Javascript 객체, 배열 또는 기본 유형일 수 있습니다. 중요한 것은 모두 AngularJS 범위 객체에 속한다는 것입니다.
AngularJS는 범위를 사용하여 데이터 모델과 뷰 인터페이스 UI 간의 양방향 동기화를 유지합니다. 모델 상태가 변경되면 AngularJS는 즉시 뷰 인터페이스를 새로 고치고 그 반대의 경우도 마찬가지입니다.
또한 AngularJS는 다음과 같은 몇 가지 매우 유용한 서비스 기능도 제공합니다.
1. 기본 서비스에는 종속성 주입, XHR, 캐싱, URL 라우팅 및 브라우저 추상화 서비스가 포함됩니다.
2. 자신만의 특정 애플리케이션 서비스를 확장하고 추가할 수도 있습니다.
3. 이 서비스를 사용하면 매우 편리하게 WEB 애플리케이션을 작성할 수 있습니다.