Angularjs-modules
提供:Dev Guides
AngularJS-モジュール
AngularJSはモジュラーアプローチをサポートしています。 モジュールは、サービス、コントローラー、アプリケーションなどのロジックを分離するために使用されます。 コードから、コードをクリーンに維持します。 モジュールを個別のjsファイルで定義し、module.jsファイルに従って名前を付けます。 次の例では、2つのモジュールを作成します-
- アプリケーションモジュール-コントローラでアプリケーションを初期化するために使用されます。
- Controller Module -コントローラーの定義に使用されます。
アプリケーションモジュール
これは、次のコードを含む_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;
}
};
});
ここでは、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
<html>
<head>
<title>Angular JS Modules</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "/angularjs/src/module/mainApp.js"></script>
<script src = "/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 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>
</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_をWebブラウザーで開きます。 結果をご覧ください。