AngularJS modulo
Modulo definisce un'applicazione.
Il modulo è un contenitore in diverse parti dell'applicazione.
Modulo Controller è un'applicazione contenitore.
Il controllore di solito parte di modulo.
Creare un modulo
È possibile creare un modulo da AngularJS della funzioneangular.module:
<Script>
var app = angular.module ( "myApp" , []);
parametro "MyApp" corrisponde alla esecuzione degli elementi dell'applicazione HTML.
Ora è possibile aggiungere un controller istruzioni, filtri, ecc nelle applicazioni AngularJS.
Aggiungere controller
È possibile utilizzare le istruzioning-controller per aggiungere applicazioni Controller:
AngularJS esempi
{{FirstName + "" + lastName }}
</ Div>
<Script>
app.controller ( "myCtrl", la funzione ( $ portata) {
$ Scope.firstName = "John";
$ Scope.lastName = "Rossi";
});
Prova »
È possibile AngularJS Controller conoscere più informazioni su la sezione di controllo.
Aggiungere le istruzioni
AngularJS fornisce molti comandi built-in, è possibile utilizzare per aggiungere funzionalità alla vostra applicazione.
Le istruzioni complete si possono trovare in il contenuto del manuale di riferimento AngularJS .
Inoltre, è possibile utilizzare il modulo per aggiungere le proprie applicazioni di istruzione:
AngularJS esempi
<Script>
app.directive ( "w3bigDirective", function ( ) {
tornare {
template: "Ho creato il costruttore di istruzioni!"
};
});
Prova »
È possibile AngularJS direttive conoscere più informazioni su sezione di istruzioni.
Moduli e controller incluse nel file JS
AngularJS Tipicamente modulo applicativo e il controller è incluso nel file JavaScript.
Negli esempi che seguono, "myApp.js" contiene la definizione dei moduli applicativi programma, file "myCtrl.js" contiene il controllore:
AngularJS esempi
<HTML>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<Div ng-app = "myApp " ng-controllore = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>
<Script src = "myApp.js"> </ script>
<Script src = "myCtrl.js"> </ script>
</ Corpo>
</ Html>
Prova »
myApp.js
 | Nella definizione del modulo parametro [] viene utilizzato per definire le dipendenze dei moduli. Staffe [] indica che il modulo non si basa su, se c'è dipendenza, quindi dipenderà dal nome del modulo scritto in parentesi. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funzione influenzerà il namespace globale
JavaScript dovrebbe evitare di utilizzare funzioni globali. Perché possono facilmente essere coperti con un altro file di script.
AngularJS ambito modulo in modo che tutte le funzioni del modulo, per evitare il problema.
Quando si carica la libreria?
| Nel nostro esempio, tutte le raccolte documenti AngularJS HTML vengono caricati nella testa. |
|---|
Per le applicazioni HTML è generalmente consigliato per tutti gli script sono collocati nella parte inferiore dell'elemento <body>.
Questo aumenterà la velocità di caricamento pagina HTML perché non è soggetta a caricare script per caricare.
Nel nostro esempio più AngularJS, si vedrà biblioteca AngularJS viene caricata nella <head> del documento.
Nel nostro esempio, AngularJS nell'elemento <head> viene caricato, perché la chiamata a angular.module essere effettuata solo dopo il completamento del caricamento della libreria.
Un'altra soluzione è quella di caricare la libreria AngularJS elemento <body>, ma deve essere posizionato di fronte al vostro script AngularJS:
AngularJS esempi
<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-controllore = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl", la funzione ($ portata) {
$ Scope.firstName = "John";
$ Scope.lastName = "Rossi";
});
</ Script>
</ Corpo>
</ Html>
Prova »