2016-07-02 3 views
-1

Je suis nouveau dans Angular et je me débrouille avec les contrôleurs. J'ai créé cette fonction de contrôleur simple:Fonction de contrôleur d'appel au sein d'une fonction

(function(){ 
var app = angular.module('store', []); 

app.controller('StoreController', function(){ 
      this.product = gem; 
}); 

    var gem = { 
     name: "Dodecahedron", 
     price: 2.95, 
     description: '...' 
     };  


})(); 

Lorsque j'appelle ce contrôleur sous mon index.html, il fonctionne parfaitement. Voici mon index.html:

<html> 

<head> 

<script src = "angular.min.js"></script> <!--ANGULAR SOURCE--> 
<script src = "app.js"></script> <!--APP SOURCE--> 
<link rel = "stylesheet" href = "bootstrap.css" type = "text/css"> <!--BOOTSTRAP--> 

</head> 

<body ng-app = "store"> 
<div ng-controller="StoreController as store"> 
    <h1>{{store.product.name}}</h1> 
    <h2> {{store.product.price}} </h2> 
    <p> {{store.product.description}} </p> 
</div> 

</body> 


</html> 

Mon code fonctionne et trouvé comme prévu. Cependant, je ne comprends pas quel est le but de la dernière série de parenthèses dans ma fonction de contrôleur car une fois que je l'enlève, mon contrôleur ne fonctionne plus. Cela semble inutile, mais pour une raison quelconque, mon contrôleur ne fonctionnera pas sans cela. Quelqu'un pourrait-il me dire pourquoi cela ne fonctionne pas?

merci!

+1

Quelles parenthèses exactement? –

+0

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression –

+1

Angular est en quelque sorte un framework js avancé. Par conséquent, pour le maîtriser, il faut connaître la connaissance de soi. Je vous recommande de lire d'abord cette magnifique série de livres. https://github.com/getify/You-Dont-Know-JS –

Répondre

2

L'ensemble

(function(){ 


})() 

le code environnant est appelé une "fonction d'auto invocateur". Ainsi, omettre() ne fait que définir une fonction et ne l'appelle jamais, donc votre application angulaire n'obtient pas son module "store" configuré.

Son but ici est de créer une portée de sorte que la variable "app" et toute autre variable ne fuient pas dans le contexte global (fenêtre).

Si vous utilisez un bundler de modules tel que webpack qui ajoute déjà un contexte de fonction locale, cela devient redondant. Je suppose que c'est utile pour vous parce que vous avez une étiquette de script pour chaque fichier angulaire dans votre application.