AngularJS 애플리케이션


이제 실제 AngularJS 단일 페이지 웹 애플리케이션(SPA)을 만들 차례입니다.

AngularJS 애플리케이션 예제

AngularJS에 대해 충분히 배웠으므로 이제 첫 번째 AngularJS 애플리케이션 생성을 시작할 수 있습니다.

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
응용 프로그램 파일 "myNoteApp.js":

var app = angle.module("myNoteApp", []);

컨트롤러 파일 "myNoteCtrl. js":

app.controller("myNoteCtrl", function($scope) {  $scope.message = ""; $scope.left = function() {return 100 - $scope.message.length;};

$scope.clear = 함수() {$scope.message = "";};

$scope.save = function() {alert("Note Saved");};
});

<html> 요소는 AngularJS 애플리케이션입니다. -app ="
myNoteApp
":

<

html

ng-app=

"myNoteApp"
>

<div>의 컨테이너는 HTML의 컨트롤러입니다. 페이지: ng- 컨트롤러 범위="
myNoteCtrl
":<div ng-controller="myNoteCtrl"
>

ng-model
이다 컨트롤러 변수 <textarea ng-model="message"
cols=

"40" rows=

" 10"
></textarea>

두 개의 ng-click 이벤트는 컨트롤러 기능 clear() 및 save():

<button ng-click="save()" >을 호출합니다. ;Save< /button >
ng-bind 이 명령어는 컨트롤러 함수 left()를 <span>에 바인딩하여 나머지 문자를 표시하는 데 사용됩니다. Number of 왼쪽 문자: <span ng-bind="left()"
>

</span>

응용 프로그램 라이브러리 파일을 로드해야 합니다. AngularJs에서 실행되기 전에: < script src="myNoteApp.js"><
/script

>

< script src= "myNoteCtrl.js" ></script>

AngularJS 애플리케이션 아키텍처

위의 예는 완전한 AngularJS 단일 페이지 웹 애플리케이션(SPA)입니다.

<html> 요소에는 AngularJS 애플리케이션(ng-app=)이 포함되어 있습니다.

<div> 요소는 AngularJS 컨트롤러의 범위를 정의합니다. (ng-controller=).

하나의 애플리케이션에는 여러 개의 컨트롤러가 있을 수 있습니다.

애플리케이션 파일(my...App.js)은 애플리케이션 모델 코드를 정의합니다.

하나 이상의 컨트롤러 파일(my...Ctrl.js)이 컨트롤러 코드를 정의합니다.

요약 - 어떻게 작동하나요?

ng-app 지시문은 앱의 루트 요소 아래에 있습니다.

단일 페이지 웹 애플리케이션(SPA)의 경우 일반적으로 애플리케이션의 루트는 다음과 같습니다. <html> 요소입니다.

하나 이상의 ng-controller 지시문이 애플리케이션의 컨트롤러를 정의합니다. 각 컨트롤러에는 정의된 HTML 요소라는 고유한 범위가 있습니다.

AngularJS는 HTML DOMContentLoaded 이벤트에서 자동으로 시작됩니다. 발견되면 ng-app 지시문을 사용하면 AngularJS는 지시문에 모듈을 로드하고 ng-app을 애플리케이션의 루트로 컴파일합니다.

애플리케이션의 루트는 전체 페이지일 수도 있고, 페이지의 작은 부분일 수도 있습니다. 작은 부분일 경우 컴파일 및 실행 속도가 더 빨라집니다.

←