음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2016.03.18 21:57 / AgnularJS/w3schools 번역


자!! 다시 오랜만에 앵귤러 번역을 재개해봅니다.

모든 저작권은 역시나 W3Schools.com에 있습니다!

(ALL Copylight is on the w3schools.)

AngularJS Modules

AngularJS Module은 어플리케이션을 정의하는데 사용됩니다.

Module은 어플리케이션 다른 파트의 컨테이너 역할을 합니다.

Module은 어플리케이션의 컨트롤러의 컨테이너 역할을 합니다.

컨트롤러는 항상 모듈에 속합니다.


모듈을 만들어봅시다 Creating a Module

모듈은 AngularJS의 함수인 angular.module 을 사용해서 만듭니다.
<div ng-app="myApp">...</div>

<script>

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

</script>

"myApp" 이라고 쓰여진 매개변수는 어플리케이션이 작동하면 제공되는 HTML 엘리먼트에요.

이제 여러분들은 컨트롤러, 지시자(directives), 필터, filters 같은 여러분의 앵귤러 어플리케이션을 추가할 수 있어요.


컨트롤러를 추가해 봅시다. Adding a Controller

여러분의 어플리케이션에 컨트롤러를 추가해봅시다!. 그리고 컨트롤러는 ng-controller 지시자를 이용해서 제공됩니다

Example

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

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

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

</script>
Try it Yourself »
컨트롤러에 대해서는 뒤에서 더 자세하게 번역할 거에요!!

지시자를 추가해 봅시다. Adding a Directive

앵귤러에서는 여러분이 여러분 어플리케이션에 기능을 추가할때 사용할수있는 내장 지시자가 이미 만들어져있어요.
레퍼런스 문서를 보고싶다면!! w3schhols에서 제공하는 지시자 레퍼런스를 참고하세요! 요기클릭!!
게다가 여러분은 여러분만의 지시자를 여러분의 어플리케이션에 모듈을 사용해서 추가할 수 있어요.

Example

<div ng-app="myApp" w3-test-directive></div>

<script>

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

app.directive("w3TestDirective"function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>
Try it Yourself »
지시자에 대해서도 뒤에서 더 자세하게 번역할 거에요!!

모듈과 컨트롤러를 파일안으로!! 

Modules and Controllers in Files

보통의 앵귤러 어플리케이션은 모듈과 컨트롤러를 자바스크립트 파일에 넣어놔요.
아래 예제에서는 "myApp.js" 파일은 "myCtrl.js"파일이 컨트롤러를 포함하고있는 동안에 어플리케이션의 모듈을 정의하고있어요. 

Example

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

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

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

myApp.js

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

* [] ← 왼쪽처럼 생긴 모듈 정의식에 있는 파라미터는 모듈에 대한 의존성을 정의하는데 사용할 수 있어요.
* [] 파라미터를 사용하지 않을경우 여러분은 새로운 모듈을 만들지 않겠다는 거에요, 하지만 이미 존재하는건 검색할 수 있어요.

myCtrl.js

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

함수는 전역 네임스페이스를 더럽힐 수 있어요.

Functions can Pollute the Global Namespace

자바스크립트에서 전역함수는 꼭 피해야해요. 전역함수들은 다른 스크립트 파일에 의해서 오버라이트되거나 파괴될수 있거든요.
(위와 관련해서는 본 블로그에 전역네임스페이스 관련 포스팅을 찾아보시면 됩니다.)
앵귤러 모듈은 모든 함수들을 모듈의 지역으로 넣어놔서 위같은 문제를 막으려 합니다.

라이브러리를 로드할 때

When to Load the Library

보통의 HTML 어플리케이션들은 스크립트태그를 바디태그안의 마지막줄에 위치시켜요. 하지만 앵귤러 라이브러리를 로드할때는 헤드태그안 혹은 바디태그의 시작부분에 위치시켜서 로드하는 것을 권장합니다!

Example

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

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

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

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




준돌 Jundol / 2015.12.10 10:59 / AgnularJS/w3schools 번역



AngularJS Expressions

AngularJS 표현식은 두개의 중괄호 안에 작성됩니다 : {{ 표현식 }}.
AngularJS 표현식의 HTML 데이터 바인딩은 ng-bind 지시자와 같은 역할을 합니다.
AngularJS 표현식이 사용된곳에 정확하게 데이터가 출력됩니다.

AngularJS 표현식은 자바스크립트 표현식과 매우 비슷합니다. : 그 두 개는 literals, opertaors 그리고 variables 를 포함하고 있습니다.
예를들어 {{ 5 + 5 }} 혹은 {{ firstName + " " + lastName }}

AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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 »

만약 여러분들이 ng-app 지시자를 제거한다면, HTML 표현식이 계산없이 그대로 보여질 것입니다.(아래 예제 참조) 


AngularJS 예제

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

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Try it Yourself »


AngularJS 숫자

AngularJS 의 숫자는 Javacript 의 숫자와 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<div ng-app="" ng-init="quantity=1;cost=5">


<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
Try it Yourself »

※ ng-init 을 사용하는 일은 매우 드뭅니다. 여러분들은 컨트롤러 챕터에서 데이터를 초기화하는 더 좋은 방법을 배우게 될 것입니다.


AngularJS 문자열

AngularJS 문자열은 Javascript 의 문자열과 닮았습니다:

AngularJS 예제

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

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

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

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

</div>

Try it Yourself »

AngularJS 객체

AngularJS 의 객체는 Javascript의 객체와 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

Try it Yourself »

AngularJS 배열

AngularJS 배열은 Javascript 배열과 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Try it Yourself »

ng-bind를 사용한 예제와 같습니다.

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Try it Yourself »

AngularJS 표현식 VS. Javacript 표현식

Javscript 표현식과 AngularJS 표현식 같은 경우에는 literals, operatiors 그리고 변수들을 담을 수 있습니다.
Javscript 표현식과 AngularJS 표현식 같지 않은 경우에는 HTML 안에 작성될 수 있습니다.
AngularJS 표현식은 conditionals, loops 그리고 exceptions가 자바스크립트 표현식일때는 지원되지않습니다.
AngularJS 표현식은 filters를 자바스크립트 표현식이 하고있지않을 때 지원합니다.


원본 Link : http://www.w3schools.com/angular/angular_expressions.asp

준돌 Jundol / 2015.12.10 10:47 / AgnularJS/w3schools 번역



KOR

AngularJS 를 공부하기 위해 www.w3schools.com 의 AngularJS 튜토리얼을 번역 포스팅 하기 시작했습니다.

모든 포스팅은 비영리목적으로 제작되며 모든 저작권은 w3schools.com 에 있음을 알립니다.


ENG

AngularJS of www.w3shools.com in this tutorial, translation began to post to study AngularJS.

All post for non-profit.

All Copyright is on the w3schools.

준돌 Jundol / 2015.12.09 16:04 / AgnularJS/w3schools 번역


AngularJS 소개

AngularJS는 자바스크립트 프레임워크 입니다. HTML 페이지에 <script> 태그를 사용하여 삽입할 수 있습니다.
AngularJS는 HTML의 속성과 directives, 그리고 Expressions 인 HTML 데이터 바인딩에서 확장된 것 입니다.


AngularJS는 자바스크립트 프레임워크입니다.

AngularJS는 자바스크립트프레임워크입니다. AngularJS의 라이브러리는 자바스크립트로 작성되었습니다.
AngularJS는 자바스크립트 파일로 분산되어있습니다. 그리고 스크립트 태그를 사용하여 웹 페이지에 추가될 수 있습니다.

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


HTML에서 확장된 AngularJS

AngularJS 는 HTML 에서 ng-directives 를 확장되었습니다.
ng-app 지시자는 AngularJS 어플리케이션을 정의합니다.
ng-model 지시자는 값을 HTML 컨트롤러(input, select, textarea)에 어플리케이션 데이터를 바인딩합니다.
ng-bind 지시자는 HTML View 단에 어플리케이션 데이터를 바인딩합니다.

AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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 필드에게 어플리케이션의 name 값을 바인딩하는데 사용됩니다.
ng-bind 지시자는 <p> 엘리먼트에 어플리케이션의 name 값을 inerHTML로 바인딩(삽입)하는데 사용됩니다.


AngularJS 지시자

이미 앞에서 보았듯이, AngularJS 지시자는 HTML 속성에 ng 접두사가 붙습니다.
ng-init 지시자는 
AngularJS 어플리케이션의 값들을 초기화합니다.


AngularJS 예제

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

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

</div>

Try it Yourself »

HTML 대안으로 유효한:

AngularJS 예제

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

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

</div>

Try it Yourself »

* AngularJS Tip

만약 여러분들의 페이지를 HTML에 적절하게끔 만들려면 여러분들은 data-ng- 를 ng-대신 사용할 수 있습니다. 
여러분은 더 많은 지시자를 이 튜토리얼을 진행하면서 배울 수 있습니다.


AngularJS 표현식

AngularJS 표현식은 두개의 중괄호 안에 쓰여집니다. : {{ expression }}
AngularJS의 "output" 데이터는 표현식이 쓰여지는곳에 정확히 출력됩니다.

AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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데이터를 HTML 에 바인딩하는 ng-bind 지시자와 똑같이 사용합니다.

AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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 어플리케이션

AngularJS modules는 AngularJS 어플리케이션을 정의합니다.
AngularJS controlls는 AngularJS 어플리케이션을 컨트롤 합니다.
ng-app 지시자는 어플리케이션을 정의할 때 사용하며, ng-controller 지시자는 컨트롤러를 정의할 때 사용합니다.

AngularJS 예제

<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 모듈은 어플리케이션을 정의합니다.

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

AngularJS contollers 는 어플리케이션을 컨트롤합니다:

AngularJS Controller

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

여러분들은 modules와 controllers 의 더 자세하게 나중에 이 튜토리얼을 진행하며 배울 수 있습니다.


준돌 Jundol / 2015.12.09 15:28 / AgnularJS/w3schools 번역




AngularJs 는 Single Page Applications (SPAS)를 개발하기에 최적화되어있습니다.
AngularJS 는 배우기 쉽습니다.
AngularJS 를 지금 배워봅시다!


이 튜토리얼

이 튜토리얼은 가능한 빠르고 효율적으로 AngularJS 를 배울 수 있도록 고안되었습니다.
먼저, 여러분은 AngularJS의 기본부터 배우게 될겁니다 : directives, expressions, filters, modules, 그리고 controllers.
그다음 여러분은 AngularJS의 모든것을 배우게 될 것입니다 :
Events, DOM, Froms, Input, Validation, Http, 그리고 더 많이.

모든 챕터마다 여러분 스스로 실습할 수 있습니다.

모든챕터에는 온라인으로 예제를 수정할 수 있고, 버튼을 클릭해서 결과를 볼 수 있습니다.

AngularJS 예제
<!DOCTYPE html>
<html lang="en-US">
<script src="http://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>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

TryItYourSelf


사전지식

AngularJS를 배우기전에 알아두면 좋은 지식들:
HTML, CSS , Javscript


AngularJS 역사

AngularJS 버전 1.0 은 2012년에 배포되었습니다.
Miško Hevery, 구글 개발자들은 2009년부터 AngularJS를 개발하기 시작했습니다.
아이디어는 굉장히 잘 구현되었고 현재에는 구글에서 AngularJS프로젝트를 공식적으로 지원하고 있습니다.


AngularJS 예제

W3School's 의 AngularJS 튜토리얼은 굉장히 많은 AngularJS 예제를 담고 있습니다.
AngularJS 예제


AngularJS 레퍼런스

AngularJS레퍼런스는 모든 directives 와 filters 를 튜토리얼에 담고 있습니다.
AngularJS레퍼런스


원본 : http://www.w3schools.com/angular/default.asp


© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
78 / 52 / 96,877