example_AngularJS를 사용하여 AngularJS의 모듈을 설명하세요.
- WBOY원래의
- 2016-05-16 15:54:41877검색
AngularJS는 모듈식 접근 방식을 지원합니다. 모듈은 서비스, 컨트롤러, 애플리케이션 등을 별도의 논리로 표현하고 코드를 깔끔하게 유지하는 데 사용됩니다. 모듈을 별도의 js 파일로 정의하고 module.js 파일에 따라 이름을 지정합니다. 이 예에서는 두 개의 모듈을 만듭니다.
- 애플리케이션 모듈 - 컨트롤러 애플리케이션을 초기화하는 데 사용됩니다.
- 컨트롤러 모듈 - 컨트롤러를 정의하는 데 사용됩니다
애플리케이션 모듈
mainApp.js
var mainApp = angular.module("mainApp", []);
여기에서는 angle.module 기능을 사용하여 애플리케이션의 mainApp 모듈을 선언했습니다. 빈 배열을 전달했습니다. 이 배열에는 일반적으로 종속 모듈이 포함됩니다.
컨트롤러 모듈
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: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;
}
};
});
여기서는 StudentController 모듈의 mainApp.controller 기능을 채택한 컨트롤러를 선언했습니다.
모듈 사용
<div ng-app="mainApp" ng-controller="studentController"> .. <script src="mainApp.js"></script> <script src="studentController.js"></script>
여기서는 ng-app 지시문과 ng-controller 지시문을 사용하는 컨트롤러 애플리케이션 모듈을 사용하고 있습니다. 기본 HTML 페이지에 mainApp.js와 StudentController.js를 가져왔습니다.
예
다음 예에서는 위의 모든 모듈을 보여줍니다.
testAngularJS.htm
<html>
<head>
<title>Angular JS Modules</title>
<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 Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td></tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
</body>
</html>
mainApp.js
var mainApp = angular.module("mainApp", []);
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: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;
}
};
});
출력
웹 브라우저에서 textAngularJS.htm을 엽니다. 아래 결과를 참조하세요.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.