English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 기본 튜토리얼

AngularJS 모듈

AngularJS는 모듈화 방법을 지원합니다. 모듈은 로직(예: 서비스, 컨트롤러, 애플리케이션 등)을 코드로부터 분리하여 코드의 정리를 유지합니다. 우리는 별도의 js 파일에서 모듈을 정의하고 module.js 파일의 이름으로 명명합니다. 다음 예제에서는 두 개의 모듈을 생성할 것입니다-

  • Application Module(응용 모듈)− 애플리케이션을 초기화하는 데 사용됩니다.controller(s)。

  • Controller Module(컨트롤러 모듈) - 컨트롤러를 정의하는 데 사용됩니다.

응용 모듈

아래는 mainApp.js라는 파일로, 다음과 같은 코드를 포함하고 있습니다-

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

여기서는 angular.module 함수를 사용하여 애플리케이션 mainApp 모듈을 선언하고, 이에 빈 배열을 전달합니다. 이 배열은 일반적으로 관련 모듈을 포함합니다.

컨트롤러 모듈

studentController.js

mainApp.controller("studentController",　function($scope)　{
　　　$scope.student　=　{
　　　　　　firstName: "Mahesh",
　　　　　　lastName: "Parashar",
　　　　　　500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　{name:'Math',marks:65},
　　　　　　　　　{name:'English',marks:75},
　　　　　　　　　{name:'Hindi',marks:67}
　　　　　　],
　　　　　　fullName:　function()　{
　　　　　　　　　var　studentObject;
　　　　　　　　　studentObject　=　$scope.student;
　　　　　　　　　return　studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　}
　　　});
});

여기서는 mainApp.controller 함수를 사용하여 studentController 모듈을 선언하는 컨트롤러를 정의합니다.

모듈 사용

<div ng-app = "mainApp" ng-controller = "studentController"
　　　...
　　　<script src="mainApp.js"></script>
　　　<script src="studentController.js"></script>
	</div>

여기서는 ng를 사용합니다-app 명령어의 애플리케이션 모듈과 ngcontroller 명령어를 사용하는 컨트롤러. 우리는 HTML 메인 페이지에서 mainApp.js와 studentController.js를 가져옵니다.

온라인 예제

이 예제에서는 위의 모든 모듈의 사용법을 보여줍니다.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Modules</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src = "/run/angularjs/src/module/mainApp.js"></script>
　　　　　　<script src = "/run/angularjs/src/module/studentController.js"></script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table, th, td {
　　　　　　　　　　　　border:　1px solid grey;
　　　　　　　　　　　　border-collapse: collapse;
　　　　　　　　　　　　padding:　5px;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(odd) {
　　　　　　　　　　　　background-color: #f2f2f2;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(even) {
　　　　　　　　　　　　background-color: #ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS 모듈 사용 예제</h2>
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController"
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>이름 입력:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>성 입력: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>이름: </td>
　　　　　　　　　　　　　　　<td>{{ student.fullName() }}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>과목:</td>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　　　　　<th>이름</th>
　　　　　　　　　　　　　　　　　　　　　　　　<th>점수</th>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　　　　<tr ng-repeat = "subject in student.subjects"
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.name }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.marks }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　</table>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　</body>
</html>
테스트를 보세요‹/›

mainApp.js

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

studentController.js

mainApp.controller("studentController",　function($scope)　{
　　　$scope.student　=　{
　　　　　　firstName:　"Sea",
　　　　　　lastName:　"Gull",
　　　　　　500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　　　　　{name:'물리',marks:70},
　　　　　　　　　　　　　{name:'화학',marks:80},
　　　　　　　　　　　　　{name:'수학',marks:65},
　　　　　　　　　　　　　{name:'영어',marks:75},
　　　　　　　　　　　　　{name:'국어',marks:67}
　　　　　　],
　　　　　　fullName:　function()　{
　　　　　　　　　var　studentObject;
　　　　　　　　　studentObject　=　$scope.student;
　　　　　　　　　return　studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　}
　　　});
});

출력 결과

네트워크 브라우저에서 파일을 엽니다textAngularJS.htm。

AngularJS 양식AngularJS HTML DOM