Latest web development tutorials

โมดูล AngularJS

โมดูลกำหนดโปรแกรมประยุกต์

โมดูลเป็นภาชนะในส่วนต่าง ๆ ของแอพลิเคชัน

โมดูลควบคุมเป็นโปรแกรมภาชนะ

ควบคุมมักจะเป็นโมดูล

สร้างโมดูล

คุณสามารถสร้างโมดูลโดย AngularJS ของฟังก์ชั่นangular.module A:

<div NG-App = "แอปของฉัน "> ... </ div>

<script>

var App = angular.module ( "MyApp" []);

</ script>

"แอปของฉัน" พารามิเตอร์สอดคล้องกับการดำเนินการขององค์ประกอบการประยุกต์ใช้ HTML ได้

ตอนนี้คุณสามารถเพิ่มคำแนะนำฟิลเตอร์ ฯลฯ ควบคุมในการใช้งาน AngularJS

เพิ่มตัวควบคุม

คุณสามารถใช้คำแนะนำNG-ควบคุมเพื่อเพิ่มการใช้งานควบคุม:

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl" >
{{FirstName + "" + นามสกุล }}
</ div>

<script>

var App = angular.module ( "MyApp" []);

app.controller ( "myCtrl" ฟังก์ชั่น ( $ ขอบเขต) {
$ scope.firstName = "จอห์น";
$ scope.lastName = "โด";
});

</ script>

ลอง»

คุณสามารถ AngularJS ควบคุมการ เรียนรู้ความรู้เพิ่มเติมเกี่ยวกับส่วนควบคุม

เพิ่มคำแนะนำ

AngularJS ให้ในตัวคำสั่งจำนวนมากคุณสามารถใช้เพื่อเพิ่มฟังก์ชันการใช้งานของคุณ

คำแนะนำที่สมบูรณ์สามารถพบได้ในเนื้อหาของ คู่มืออ้างอิง AngularJS

นอกจากนี้คุณสามารถใช้โมดูลที่จะเพิ่มการใช้งานการเรียนการสอนของคุณเอง:

AngularJS ตัวอย่าง

<div NG-App = "MyApp " w3big-Directive> </ div>

<script>

var App = angular.module ( "MyApp" []);

app.directive ( "w3bigDirective" ฟังก์ชั่น ( ) {
กลับ {
แม่แบบ: "ผมสร้างตัวสร้างการเรียนการสอน"
};
});
</ script>

ลอง»

คุณสามารถ AngularJS สั่ง เรียนรู้เพิ่มเติมเกี่ยวกับความรู้การเรียนการสอนส่วน

โมดูลและควบคุมรวมอยู่ในไฟล์ JS

โดยปกติ AngularJS โมดูลโปรแกรมและการควบคุมจะถูกรวมอยู่ในแฟ้ม JavaScript

ในตัวอย่างต่อไป "myApp.js" ที่มีความหมายของโมดูลการประยุกต์ใช้โปรแกรม "myCtrl.js" แฟ้มมีการควบคุม:

AngularJS ตัวอย่าง

<! DOCTYPE html>
<html>
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<body>

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">
{{FirstName + "" + นามสกุล }}
</ div>

<script src = "myApp.js"> </ script>
<script src = "myCtrl.js"> </ script>

</ body>
</ html>

ลอง»

myApp.js

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

หมายเหตุ ในความหมายโมดูลพารามิเตอร์ [] จะใช้เพื่อกำหนดอ้างอิงโมดูล
วงเล็บ [] แสดงให้เห็นว่าโมดูลไม่พึ่งพาหากมีการพึ่งพาจากนั้นจะขึ้นอยู่กับชื่อโมดูลที่เขียนในวงเล็บ

myCtrl.js

app.controller( "myCtrl" , function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

ฟังก์ชั่นจะมีผลต่อ namespace โลก

JavaScript ควรหลีกเลี่ยงการใช้ฟังก์ชั่นระดับโลก เพราะพวกเขาสามารถจะปกคลุมไปด้วยไฟล์สคริปต์อื่น

AngularJS ขอบเขตโมดูลเพื่อให้การทำงานทั้งหมดในโมดูลเพื่อหลีกเลี่ยงปัญหาที่เกิดขึ้น

เมื่อโหลดห้องสมุด?

หมายเหตุ ในตัวอย่างของเราทุกไลบรารีเอกสาร AngularJS HTML จะถูกโหลดในหัว

สำหรับการใช้งาน HTML แนะนำโดยทั่วไปสคริปต์ทั้งหมดจะอยู่ในด้านล่างของ <body> องค์ประกอบ

ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บเพราะ HTML ไม่อยู่ภายใต้การโหลดสคริปต์ในการโหลด

ในตัวอย่างหลาย AngularJS ของเราคุณจะเห็นห้องสมุด AngularJS มีการโหลดใน <head> ของเอกสาร

ในตัวอย่างของเรา AngularJS ใน <head> องค์ประกอบที่มีการโหลดเพราะการเรียกร้องให้ angular.module เพียง แต่จะดำเนินการหลังจากเสร็จสิ้นการโหลดห้องสมุด

ทางออกก็คือการโหลด AngularJS ห้องสมุด <body> องค์ประกอบ แต่จะต้องอยู่ในด้านหน้าของสคริปต์ AngularJS ของคุณ:

AngularJS ตัวอย่าง

<! DOCTYPE html>
<html>
<head>
<Meta charset = "UTF-8 ">
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ head>
<body>

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">
{{FirstName + "" + นามสกุล }}
</ div>
<script>
var App = angular.module ( "MyApp" []);
app.controller ( "myCtrl" ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น";
$ Scope.lastName = "โด";
});
</ script>

</ body>
</ html>

ลอง»