-
[AngularJS] 16. Application - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:25AngularJS ApplicationAngularJS 단일 페이지 어플리케이션(Single Page Application{SPA})을 만들 시간입니다!1. An AngularJS Application Example2. Application ExplainedmyNote.html1234567891011121314151617181920212223242526272829<!DOCTYPE html><html><head><script src=</head><body ng-app="myNoteApp" ng-controller="myNoteCtrl"><h2>My Note</h2><textarea ng-model="message" cols="40" rows="10"></textarea><p><button ng-click="save()">Save</button><button ng-click="clear()">Clear</button></p><p>Number of characters left: <span ng-bind="left()"></span></p><script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script></body></html>
cs myNoteApp.js123var app = angular.module("myNoteApp", []);cs myNoteCtrl.js1234567app.controller("myNoteCtrl", function($scope) {$scope.message = "";$scope.left = function() {return 100 - $scope.message.length;};$scope.clear = function() {$scope.message = "";};$scope.save = function() {alert("Note Saved");};});cs <html> 요소는 AngularJS 어플리케이션의 컨테이너입니다: ng-app="myNoteApp"1<html ng-app="myNoteApp">cs HTML 페이지의 <div>는 제어의 범위입니다: ng-controller="myNoteCtrl"12<div ng-controller="myNoteCtrl">cs ng-model은 <textarea>를 제어 변수 message와 연결합니다:123<textarea ng-model="message" cols="40" rows="10"></textarea>cs 두 개의 ng-click 이벤트는 clear()와 save() 제어 함수를 호출합니다.1234<button ng-click="save()">Save</button><button ng-click="clear()">Clear</button>cs ng-bind는 문자가 몇 개 남았는지 표시하는 <span>에 left() 제어 함수를 연결합니다.어플리케이션 라이브러리를 페이지에 추가합니다:3. AngularJS Application Skeleton<html> 요소는 AngularJS 어플리케이션의 컨테이너입니다.<div> 요소는 AngularJS 제어의 범위를 선언합니다.하나의 어플리케이션에 여러 개의 제어를 가질 수 있습니다.어플리케이션 파일은 어플리케이션 모듈 코드를 정의합니다.하나 또는 여러 개의 제어 파일은 제어 코드를 정의합니다.4. Summary - How Does it Work?AngularJS 라이브러리는 <head>에서 로드됩니다, 왜냐하면 스크립트는 올바른 컴파일을 위한 라이브러리 코드에 의존적이기 때문입니다.ng-app은 어플리케이션의 root 요소에 위치해있습니다.단일 페이지 어플리케이션(SPA)를 위해, 어플리케이션의 root는 종종 <html>요소입니다.하나 또는 여러 개의 ng-controller는 어플리케이션 제어를 정의 합니다. 각각의 제어는 각각의 범위를 갖습니다: 선언되는 위치의 HTML 요소ANgularJS는 HTML DOMContentLoaded 이벤트를 자동적으로 시작합니다.ng-app지시어를 발견하면, AngularJS는 지시어로 명명된 어떠한 모듈들을 로드하고, 어플리케이션의 root로 ng-app을 함께 DOM을 컴파일 합니다.어플리케이션의 root는 전체 페이지가 되거나, 페이지의 일부분이 될 수도 있습니다.* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AugularJS] 2. AugularJS 살펴보기 - AngularJS 강좌 (0) 2016.01.15 [AngularJS] 1. 프로젝트 및 개발환경 구성 - AngularJS 강좌 (0) 2016.01.15 [AngularJS] 13.5 API - AngularJS 강좌 (0) 2015.11.20 [AngularJS] 15. Includes - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 14. Bootstrap- Angular JS 강좌 (0) 2015.06.12 [AngularJS] 13. 검사(Validations) - Angular JS 강좌 (0) 2015.06.12
