자!! 다시 오랜만에 앵귤러 번역을 재개해봅니다.
모든 저작권은 역시나 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>컨트롤러에 대해서는 뒤에서 더 자세하게 번역할 거에요!!
지시자를 추가해 봅시다. 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>지시자에 대해서도 뒤에서 더 자세하게 번역할 거에요!!
모듈과 컨트롤러를 파일안으로!!
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>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>'AngularJS > w3schools 번역' 카테고리의 다른 글
| [튜토리얼/번역] AngularJS Expressions (AngularJS 표현식) (4) | 2015.12.10 |
|---|---|
| [튜토리얼/번역] w3schools AngularJS 저작권/About Copyright (3) | 2015.12.10 |
| [튜토리얼/번역] AngularJS Intro (2) | 2015.12.09 |
| [튜토리얼/번역] AnularsJS Home (4) | 2015.12.09 |
댓글