Modul AngularJS


Modul

mentakrifkan aplikasi.

Modul ialah bekas untuk bahagian aplikasi anda yang berlainan.

Modul ialah bekas untuk pengawal aplikasi.

Pengawal biasanya tergolong dalam modul.

Buat modul

Anda boleh mencipta modul melalui fungsi angular.module AngularJS:

<div ng-app="myApp">...< /div>

<skrip>

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

</skrip>

Parameter "myApp" sepadan dengan elemen HTML yang dilaksanakan permohonan itu.

Kini anda boleh menambah pengawal, arahan, penapis, dll. dalam aplikasi AngularJS anda.

Tambah Pengawal

Anda boleh menggunakan arahan ng-controller untuk menambah pengawal aplikasi:

Instance

<!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-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Anda boleh mempelajarinya dalam Bab Pengawal AngularJS Lebih lanjut mengenai pengawal.

Tambah arahan

AngularJS menyediakan banyak arahan terbina dalam yang boleh anda gunakan untuk menambah fungsi pada aplikasi anda.

Untuk arahan lengkap, sila rujuk Manual Rujukan AngularJS.

Selain itu, anda boleh menggunakan modul untuk menambah arahan anda sendiri pada aplikasi anda:

Instance

<!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" php-directive></div>

<script>

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

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Anda boleh mengetahui lebih lanjut tentang arahan dalam bab Arahan AngularJS.

Modul dan pengawal disertakan dalam fail JS

Biasanya aplikasi AngularJS menyertakan modul dan pengawal dalam fail JavaScript.

Dalam contoh berikut, "myApp.js" mengandungi penentu modul aplikasi dan fail "myCtrl.js" mengandungi pengawal:

Contoh

<!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-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

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

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

myApp.js

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

NoteDalam takrif modul, parameter [] digunakan untuk menentukan kebergantungan modul.
Note在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
Kurungan segi empat sama [] menunjukkan bahawa modul tidak mempunyai kebergantungan Jika terdapat kebergantungan, nama modul bergantung akan ditulis dalam kurungan segi empat sama.

myCtrl.js

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

fungsi akan menjejaskan Global ruang nama

Fungsi global harus dielakkan dalam JavaScript. Kerana mereka boleh dengan mudah ditimpa oleh fail skrip lain.

Modul AngularJS menjadikan semua fungsi diliputi di bawah modul ini untuk mengelakkan masalah ini.

Bila hendak memuatkan pustaka?

Note在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

Untuk aplikasi HTML, biasanya disyorkan untuk meletakkan semua skrip di bahagian paling bawah elemen <body>

Ini akan meningkatkan kelajuan pemuatan halaman kerana pemuatan HTML tidak tertakluk kepada pemuatan skrip.

Dalam berbilang kejadian AngularJS kami, anda akan melihat bahawa pustaka AngularJS dimuatkan dalam kawasan <head>

Dalam contoh kami, AngularJS dimuatkan dalam elemen <head> kerana panggilan ke angular.module hanya boleh dibuat selepas perpustakaan dimuatkan.

Penyelesaian lain ialah memuatkan pustaka AngularJS dalam elemen <body> tetapi ia mesti diletakkan sebelum skrip AngularJS anda:

Instance

<!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-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian