cari

Rumah >hujung hadapan web >tutorial js >Terangkan modul dalam AngularJS dengan examples_AngularJS

Terangkan modul dalam AngularJS dengan examples_AngularJS

WBOY
WBOYasal
2016-05-16 15:54:41877semak imbas

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.

  1. Modul Aplikasi - digunakan untuk memulakan aplikasi pengawal
  2. Modul Pengawal - digunakan untuk menentukan pengawal

Modul Aplikasi

mainApp.js

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

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

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>

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>

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

Output

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

201561794640977.png (644×450)

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript melaksanakan kesan tatal lancar teks empat arahArtikel seterusnya：JavaScript melaksanakan kesan tatal lancar teks empat arah

Artikel berkaitan

Lihat lagi