본문 바로가기
Coding/Etc

[W3Schools AngularJS 한글강좌] Intro

by Hide­ 2017. 1. 16.
반응형

* ALL COPYRIGHTS are at w3schools. This article's purpose is only for study. *

AngularJS Introduction

AngularJS 는 Javascript framework 이다. <script> 태그를 통해 사용할 수 있다.


AngularJS is a JavaScript Framework

AngularJS 는 Javascript의 framework이므로 라이브러리는 Javascript로 작성됐다.

Javascript 파일로 배포되며 아래와 같이 script 태그를 통해 사용할 수 있다.

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

AngularJS Extends HTML

ng-app 는 AngularJS application 을 의미한다.

ng-model 은 INPUT, SELECT, TEXTAREA 등과 같은 HTML Control 들을 application data와 bind 시킨다.

ng-bind 은 application data 와 HTML view 를 bind 시킨다.

AngularJS Example

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

예제 설명:

AngularJS 는 웹 페이지가 로드될 때 자동으로 시작된다.

ng-app 는 AngularJS 에게 <div> 가 AngularJS 소속이라는 것을 알려준다.

ng-model 은 input 필드의 값을 변수 이름에 bind 시켜준다. 

ng-bind 은 innerHTML binding 된 데이터를 HTML로 보여준다.


AngularJS Directives

보다시피 AngularJS 는 HTML 요소들을 ng 라는 prefix를 붙여서 표현한다.

ng-init 은 변수를 초기화시킨다.

AngularJS Example

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
Try it Yourself »

Alternatively with valid HTML:

AngularJS Example

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
Try it Yourself »

원한다면 ng- 대신 data-ng- 도 사용가능하다.

다음장에서 자세히 배워보자.


AngularJS Expressions

AngularJS 의 표현은 다음과 같다. {{ expression }}.

AngularJS Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Try it Yourself »

AngularJS 표현은 AngularJS data 를 HTML 로 바인딩시킨다. (ng-bind 와 같음)

AngularJS Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
Try it Yourself »

AngularJS Applications

AngularJS modules 은 AngularJS applications을 정의한다.

AngularJS controllers 은 AngularJS applications을 컨트롤한다.

ng-app 은 application 을 정의하며, ng-controller 은 controller 를 정의한다.

AngularJS 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>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
Try it Yourself »

AngularJS modules 은 applications 을 정의한다:

AngularJS Module

var app = angular.module('myApp', []);

AngularJS controllers 는 applications 을 컨트롤한다:

AngularJS Controller

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});


'Coding > Etc' 카테고리의 다른 글

[W3Schools AngularJS 한글강좌] Modules  (0) 2017.01.16
[W3Schools AngularJS 한글강좌] Expressions  (0) 2017.01.16
PHP 파일업로드  (0) 2017.01.15
PHP 파싱  (1) 2016.06.01
API를 이용한 롤 전적검색 사이트 만들기  (15) 2016.02.27