[AngularJS] W3C AngularJS (1)

09 Nov 2017 in Development on AngularJS

AngularJS Introduction

이 포스트는 자습을 목적으로 W3C school AngularJS의 내용을 토대로 작성되었습니다.

AngularJS Introduction

AngularJS는 JavaScript의 프레임 워크로, HTML 페이지 내에서 <script> 태그와 함께 사용됩니다. 또한, AngularJS는 명령어를 통해 HTML 속성을 확장하거나 표현식을 사용하여 HTML에 데이터를 바인딩합니다.

AngularJS is a JavaScript Framework

AngularJS는 JavaScript로 작성된 라이브러리 입니다. JavaScript 파일로 배포되며, 웹 페이지에 script태그를 이용하여 추가할 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

AngularJS Extends HTML

AngularJS는 ng-directives로 HTML을 확장합니다. ng-app 명령어는 AngularJS 어플리케이션을 정의합니다.
ng-model 명령어는 애플리케이션 데이터를 HTML 제어 값(입력, 선택, 텍스트 영역)에 바인딩합니다.
ng-bind 명령어는 HTML View에 애플리케이션 데이터를 바인딩합니다.

Example

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>

AngularJS는 웹페이지가 로드될 때 자동적으로 실행됩니다.
ng-app명령어는 <div>태그가 AngularJS 애플리케이션의 소유자 임을 말해줍니다.
ng-model 명령어는 애플리케이션 변수name에 입력 값을 바인딩합니다.
ng-vind 명령어는 애플리케이션 변수name을 <p>태그에 innerHTML로 바인딩합니다.

AngularJS Directives

이미 살펴 보았 듯이 AngularJS 명령어는 접두사가 ng인 HTML 속성입니다. ng-init 명령어는 AngularJS 애플리케이션 변수들을 초기화합니다.

Example

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
        </script>
    <body>
        <div ng-app="" ng-init="firstName='Dan'">
          <p>The first name is <span ng-bind="firstName"></span></p>
        </div>
        <!--
        <div data-ng-app="" data-ng-init="firstName='Dan'">
        	<p>The first name is <span data-ng-bind="firstName"></span>
            </p>
        </div>
        -->
	</body>
</html>

HTML 페이지를 유효하게 만들고 싶다면, ng- 대신에 data-ng-를 사용할 수도 있습니다.

AngularJS Expressions

AngularJS 표현식은 2개의 중괄호 안에 작성됩니다. `` 표현식이 작성된 곳에는 정확하게 데이터가 출력됩니다.

Example

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
        </script>
    <body>
        <div ng-app="">
          <p>My first expression: 5</p>
        </div>
    </body>
</html>

AngularJS 표현식은 ng-bind 명령문과 동일한 방식으로 AngularJS 데이터를 HTML에 바인딩 합니다.

Example

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
        </script>
    <body>
        <div ng-app="">
          <p>Name: <input type="text" ng-model="name"></p>
          <p></p>
        </div>
</body>
</html>

AngularJS Applications

AngularJS module은 AngularJS 애플리케이션을 정의하고 AngularJS controller는 AngularJS 애플리케이션을 제어합니다. ng-app 명령어는 애플리케이션을 정의하고 ng-controller 명령어는 컨트롤러를 정의합니다.

Example

<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>
	Full Name: 
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "Dan";
        $scope.lastName= "patpang";
    });
</script>

module var app = angular.module('myApp',[]); controller app.controller('myCtrl', function($scope){});