Un modul AngularJS definește o aplicație.
Modulul este un container pentru diferitele părți ale unei aplicații.
Modulul este un container pentru controlorii de aplicații.
Controlerele aparțin întotdeauna la un modul.
Crearea unui modul
Un modul este creat folosind funcția AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>"myApp" parametru se referă la un element HTML în care aplicația va rula.
Acum puteți adăuga controlere, directive, filtre și mai mult, la cererea dumneavoastră AngularJS.
Adăugarea unui controler
Adăugați un controler de la cererea dumneavoastră, și se referă la controler cu ng-controller directivă:
Exemplu
<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>
Încearcă - l singur » Vei afla mai multe despre controlere mai târziu în acest tutorial.
Adăugarea unei directive
AngularJS are un set de directive built-in pe care le puteți utiliza pentru a adăuga funcționalitate la cererea dumneavoastră.
Pentru o referință completă, accesați AngularJS directivei de referință .
În plus, puteți utiliza modulul pentru a adăuga propriile directive la aplicațiile:
Exemplu
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script> Încearcă - l singur » Vei afla mai multe despre directivele mai tarziu in acest tutorial.
Module și controlatori în fișiere
Este comun în aplicații AngularJS pentru a pune modulul și controlerele fișiere JavaScript.
În acest exemplu, "myApp.js" conține o definiție modul de aplicație, în timp ce "myCtrl.js" conține controlerul:
Exemplu
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app=" myApp "
ng-controller=" myCtrl ">
{{ firstName + " " + lastName }}
</div>
<script src=" myApp.js "></script>
<script src=" myCtrl.js "></script>
</body>
</html>
Încearcă - l singur » myApp.js
var app = angular.module( "myApp" , []);
Sau [] Parametrul din definiția modulului poate fi folosit pentru a defini modulele dependente.
Fără [] parametru, nu creați un nou modul, dar preluarea unul existent.
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funcțiile pot polua nume global
Funcții globale trebuie evitate în JavaScript. Ele pot fi ușor înlocuite sau distruse de alte script-uri.
AngularJS module reduce această problemă, prin menținerea tuturor funcțiilor locale la modulul.
Când să încărcați biblioteca
In timp ce este comun în aplicații HTML script - uri pentru a plasa la sfârșitul <body> Elementul, este recomandat să încărcați biblioteca AngularJS , fie în <head> sau la începutul <body> .
Acest lucru se datorează faptului că apelurile către angular.module pot fi compilate numai după ce biblioteca a fost încărcat.
Exemplu
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<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>
Încearcă - l singur »