AngularJS를 배우기 시작하는 좋은 방법은 "Hello World!"라고 클래식 응용 프로그램을 만드는 것입니다.
1. 좋아하는 텍스트 편집기를 사용하여 HTML 파일을 만듭니다 (예 : HelloWorld.html).
2. 다음 소스 코드를 HTML 파일에 복사하십시오.
3. 웹 브라우저 에서이 HTML 파일을 엽니 다.
소스 코드 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app>
<헤드>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
안녕하세요 {{ 'world'}}!
</body>
</html>
효과를 확인하려면 브라우저에서 위의 코드를 실행하십시오.
이제 코드를 자세히 살펴보고 무슨 일이 일어나고 있는지 봅시다. 페이지가로드되면 Tag NG-App은 AngularJS에 전체 HTML 페이지를 처리하고 응용 프로그램을 부팅하도록 지시합니다.
코드 사본은 다음과 같습니다.
<html ng-app>
이 줄은 AngularJS 스크립트를로드합니다.
코드 사본은 다음과 같습니다.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(전체 HTML 페이지를 처리하는 AngularJS에 대한 자세한 내용은 부트 스트랩을 참조하십시오.)
마지막으로, 태그의 본문은 응용 프로그램의 템플릿으로 UI의 인사말을 보여줍니다.
코드 사본은 다음과 같습니다.
안녕하세요 {{ 'world'}}!
이중 버팀대로 태그가 지정된 {{}}의 내용은 인사말의 바운드 표현이며, 이는 간단한 문자열 '세계'입니다.
아래에서 더 흥미로운 예를 살펴 보겠습니다. AngularJS를 사용하여 동적 표현을 인사 텍스트에 바인딩하십시오.
안녕하세요 Angularjs World!
이 예는 AngularJS에 대한 양방향 데이터 바인딩을 보여줍니다.
1. 이전에 만든 Helloworld.html 문서를 편집하십시오.
2. 다음 소스 코드를 HTML 파일에 복사하십시오.
3. 브라우저 창을 새로 고치십시오.
소스 코드 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app>
<헤드>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
귀하의 이름 : <입력 유형 = "텍스트"ng-model = "YourName"자리 표시기 = "world">
<HR>
안녕하세요 {{YourName || '세계'}}!
</body>
</html>
효과를 확인하려면 브라우저에서 위의 코드를 실행하십시오.
이 예제는 다음과 같은 중요한 참고 사항이 있습니다.
1. 텍스트 입력 명령어 <입력 ng-model = "YourName" />은 YourName이라는 모델 변수에 바인딩됩니다.
2. 이중 브레이스 마크 인사말 텍스트에 이름 모델 변수를 추가하십시오.
3. 이벤트 리스너를 등록하거나 응용 프로그램에 대한 이벤트 핸들러를 추가 할 필요가 없습니다!
이제 입력 상자에 이름을 입력하면 입력 한 이름이 즉시 업데이트되고 인사말에 표시됩니다. 이것은 AngularJS 양방향 데이터 바인딩의 개념입니다. 입력 상자의 변경 사항은 즉시 모델 변수 (한 방향)에 반영되며 모델 변수에 대한 변경 사항은 즉시 인사 텍스트 (다른 방향)에 반영됩니다.
AngularJS 응용 프로그램 분석
이 섹션에서는 AngularJS 응용 프로그램의 세 가지 구성 요소를 설명하고 모델-뷰 컨트롤러 설계 패턴에 어떻게 매핑되는지 설명합니다.
템플릿
템플릿은 html 및 css로 작성하여 응용 프로그램의보기를 제시하는 파일입니다. AngularJS 컴파일러에 대한 지침으로 새 요소와 속성 태그를 HTML에 추가 할 수 있습니다. AngularJS 컴파일러는 완전히 확장 가능하므로 AngularJS를 사용하면 HTML에서 자신의 HTML 태그를 만들 수 있습니다!
응용 논리 및 행동
응용 프로그램 논리 및 동작은 JavaScript로 정의하는 컨트롤러입니다. AngularJS는 표준 AJAX 응용 프로그램과 다르며 이미 AngularJS에 내장되어 있으므로 청취자 또는 DOM 컨트롤러를 작성할 필요가 없습니다. 이러한 기능을 통해 응용 프로그램 논리를 쉽게 작성, 테스트, 유지 및 이해하기 쉽습니다.
모델 데이터 (데이터)
이 모델은 AngularJS 스코프 객체의 특성에서 확장됩니다. 모델의 데이터는 JavaScript 객체, 배열 또는 원시 유형 일 수 있으며 중요하지 않으므로 모두 AngularJS 범위의 객체에 속하는 것이 중요합니다.
AngularJS는 범위를 통해 데이터 모델과보기 인터페이스 UI 간의 양방향 동기화를 유지합니다. 모델 상태가 변경되면 AngularJS는 뷰 인터페이스에 반사 된 것을 즉시 새로 고치고 그 반대도 마찬가지입니다.
또한 AngularJS는 매우 유용한 서비스 기능을 제공합니다.
1. 기본 서비스에는 종속성 주입, XHR, 캐시, URL 라우팅 및 브라우저 초록 서비스가 포함됩니다.
2. 당신은 또한 자신의 특정 응용 프로그램 서비스를 확장하고 추가 할 수 있습니다.
3.이 서비스를 통해 웹 응용 프로그램을 작성하는 것이 매우 편리 할 수 있습니다.