음 아마 비둘기보단 똑똑할꺼야
준돌 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.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
207 / 105 / 106,198