음 아마 비둘기보단 똑똑할꺼야
준돌 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

© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
151 / 59 / 106,488