AngularJS รองรับวิธีการแบบแยกส่วน โมดูลใช้เพื่อแสดงบริการตรรกะแยกต่างหากคอนโทรลเลอร์แอปพลิเคชัน ฯลฯ และรักษารหัสให้เรียบร้อย เรากำหนดโมดูลในไฟล์ JS แยกต่างหากและตั้งชื่อในรูปแบบของไฟล์ module.js ในตัวอย่างนี้เราต้องการสร้างสองโมดูล
โมดูลแอปพลิเคชัน - ใช้เพื่อเริ่มต้นแอปพลิเคชันคอนโทรลเลอร์
โมดูลคอนโทรลเลอร์ - ใช้เพื่อกำหนดคอนโทรลเลอร์
โมดูลแอปพลิเคชัน
MainApp.js
var mainapp = angular.module ("MainApp", []);
ที่นี่เราได้ประกาศโมดูล MainApp สำหรับแอปพลิเคชันโดยใช้ฟังก์ชัน Angular.module เราผ่านอาร์เรย์ที่ว่างเปล่าไปแล้ว อาเรย์นี้มักจะมีโมดูลทาส
โมดูลคอนโทรลเลอร์
MainApp.Controller ("StudentController", ฟังก์ชั่น ($ scope) {$ scope.student = {firstName: "Mahesh", นามสกุล: "parashar", ค่าธรรมเนียม: 500, วิชา: [{ชื่อ: 'ฟิสิกส์', เครื่องหมาย: 70}, {ชื่อ: {ชื่อ: 'ภาษาอังกฤษ', เครื่องหมาย: 75}, {ชื่อ: 'ภาษาฮินดี', เครื่องหมาย: 67}], fullName: function () {var studentObject;ที่นี่เราได้ประกาศตัวควบคุมที่ใช้ฟังก์ชัน MainApp.Controller ของโมดูล StudentController
ใช้โมดูล
<div ng-app = "mainapp" ng-controller = "StudentController"> .. <script src = "mainapp.js"> </script> <script src = "studentcontroller.js"> </script>
ที่นี่เราใช้คำสั่ง NG-APP และคอนโทรลเลอร์เพื่อใช้โมดูลโดยใช้ NG-Controller Directive เราได้นำเข้า MainApp.js และ StudentController.js ในหน้า HTML หลัก
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงโมดูลทั้งหมดที่กล่าวถึงข้างต้น
testangularjs.htm
<html> <head> <title> โมดูล angular js </title> <style> ตาราง, th, td {border: 1px solid grey; การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลังสี: #f2f2f2;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <h2> แอปพลิเคชันตัวอย่าง ng-controller = "studentcontroller"> <table> <tr> <td> ป้อนชื่อแรก: </td> <td> <อินพุต type = "text" ng-model = "student.firstname"> </td> </tr> <td> <td> ป้อนชื่อสุดท้าย: </td> <td> ng-model = "student.lastname"> </td> </tr> <tr> <td> ชื่อ: </td> <td> {{student.fullname ()}} </td> </tr> <td> ng-repeat = "หัวเรื่องใน student.subjects"> <td> {{subject.name}} </td> <td> {{subject.marks}} </td> </tr> </table> </tr> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "mainapp.js"> </script> <script src = "studentcontroller.js"MainApp.js
var mainapp = angular.module ("MainApp", []);
studentcontroller.js
MainApp.Controller ("StudentController", ฟังก์ชั่น ($ scope) {$ scope.student = {firstName: "Mahesh", นามสกุล: "parashar", ค่าธรรมเนียม: 500, วิชา: [{ชื่อ: 'ฟิสิกส์', เครื่องหมาย: 70}, {ชื่อ: {ชื่อ: 'ภาษาอังกฤษ', เครื่องหมาย: 75}, {ชื่อ: 'ภาษาฮินดี', เครื่องหมาย: 67}], fullName: function () {var studentObject;เอาท์พุท
เปิด textangularjs.htm ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้
ข้างต้นคือข้อมูลเกี่ยวกับความรู้ที่เกี่ยวข้องกับโมดูล AngularJS เราจะเพิ่มความรู้ที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!