-
[AngularJS] 1. 소개(Introduction) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:12
AngularJS Introduction
AngularJS는 자바스크립트 프레임워크(JavaScript Framework) 입니다. HTML 페이지에 <script> 태그를 추가하여 사용가능 합니다.
AngularJS는 Directives를 붙인 HTML 요소의 확장입니다. Expressions HTML로 데이터를 연결 할 수 있습니다.
1. AngularJS is a JavaScript Framework
AngularJS는 자바스크립트 파일로서 분배되고, 웹페이지의 script 태그에 추가하여 사용가능 합니다.
1<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>cs 2. AngularJS Extends HTML
AngularJS는 ng-directives HTML의 확장입니다.
ng-app directive는 AngularJS 어플리케이션을 정의합니다.
ng-model directive는 어플리케이션 데이터를 제어(input, select, textarea)하는 HTML 값을 연결합니다.
ng-bind directive는 어플리케이션 데이터를 HTML 뷰에 연결합니다.
예제:123456789101112<!DOCTYPE html><html><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app=""><p>Name: <input type="text" ng-model="name"></p><p ng-bind="name"></p></div></body></html>cs AngularJS는 웹페이지가 로드될 때, 자동으로 시작됩니다.ng-app directive는 <div>요소가 AngularJS 어플리케이션의 주인임을 AngularJS에게 알려줍니다.ng-model은 어플리케이션 변수 name이 입력 필드의 값임을 연결합니다.ng-bind는 어플리케이션 변수 name의 <p> 요소의 innerHTML을 연결합니다.3. AngularJS Directives위에서 보셨듯이, AngularJS directive는 ng 접두사를 통하여 HTML 요소를 나타냅니다.ng-init은 AngularJS 어플리케이션 변수를 초기화 합니다.12345<div ng-app="" ng-init="firstName='John'"><p>The name is <span ng-bind="firstName"></span></p></div>cs * ng- 대신, data-ng- 를 사용하세요. HTML 5에서도 적용을 원하신다면.
HTML5 적용 대체 예제:
12345<div data-ng-app="" data-ng-init="firstName='John'"><p>The name is <span data-ng-bind="firstName"></span></p></div>cs 4. AngularJS ExpressionsAngularJS 식은 이중 괄호안에 작성되어 집니다: {{ expression }}AngularJS 식은 ng-bind와 마찬가지의 방법으로 데이터를 HTML에 연결합니다.ANgularJS는 식이 작성된 곳에 정확한 데이터를 출력하게 될 것 입니다.123456789101112131415<!DOCTYPE html><html><head></head><body><div ng-app=""><p>My first expression: {{ 5 + 5 }}</p></div></body></html>cs 5. AngularJS Applications
AngularJS 모듈(Module)은 AngularJS 어플리케이션을 정의합니다.
AngularJS 컨트롤러(Controllers)는 AngularJS 어플리케이션을 제어합니다.
ng-app 지시자는 어플리케이션을 정의하고, ng-controller 지시자는 제어부(controller)를 정의합니다.
123456789101112131415161718192021222324252627<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><p>Try to change the names.</p><div ng-app="myApp" ng-controller="myCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{firstName + " " + lastName}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.firstName= "John";$scope.lastName= "Doe";});</script></body></html>cs * 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 5. 필터(filter) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 4. 제어(controller) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 3. 지시어(directives) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 2. 식(expression) - Angular JS 강좌 (0) 2015.06.12
