Terangkan modul dalam AngularJS dengan examples

Terangkan modul dalam AngularJS dengan examples_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:41

asal

868 orang telah melayarinya

AngularJS menyokong pendekatan modular. Modul digunakan untuk mewakili perkhidmatan, pengawal, aplikasi, dsb. dalam logik berasingan dan memastikan kod bersih. Kami mentakrifkan modul dalam fail js yang berasingan dan menamakannya seperti fail module.js. Dalam contoh ini, kami mencipta dua modul.

Modul Aplikasi - digunakan untuk memulakan aplikasi pengawal
Modul Pengawal - digunakan untuk menentukan pengawal

Modul Aplikasi

mainApp.js

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

Salin selepas log masuk

Di sini kami telah mengisytiharkan modul Aplikasi utama aplikasi menggunakan kefungsian angular.module. Kami telah menghantar tatasusunan kosong kepadanya. Tatasusunan ini biasanya mengandungi modul bergantung.
Modul Pengawal

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;
   }
  };
});

Salin selepas log masuk

Di sini, kami telah mengisytiharkan pengawal yang menggunakan fungsi mainApp.controller modul studentController.
Gunakan modul

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

Salin selepas log masuk

Di sini kami menggunakan arahan ng-app dan modul aplikasi pengawal menggunakan arahan ng-controller. Kami telah mengimport mainApp.js dan studentController.js dalam halaman HTML utama.
Contoh

Contoh berikut akan menunjukkan semua modul di atas.

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>

Salin selepas log masuk

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;
   }
  };
});

Salin selepas log masuk

Output

Buka textAngularJS.htm dalam penyemak imbas web anda. Lihat hasilnya di bawah.

201561794640977.png (644×450)