2016-07-02 41 views
-1

私は角型を初めて知っていて、コントローラを使いこなしています。関数内でコントローラ関数を呼び出す

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

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

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


})(); 

このコントローラーをindex.htmlという名前で呼び出すと、完全に機能します。ここに私の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> 

私のコードは見つけると期待どおりです。しかし、一度取り出すとコントローラが機能しなくなるため、最後の括弧の目的がコントローラの機能にどのようなものかは分かりません。それは不要なようですが、何らかの理由でコントローラがなくても動作しません。誰かが私になぜこれが動かないのかを教えてもらえますか?

ありがとうございました!コードは "自己呼び出し関数" と呼ばれる周囲

+1

まったくかっこはどちらか? –

+0

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

+1

角度は高度なjsフレームワークです。したがって、それを習得するには、js自体の知識が必要です。私はこの素晴らしい本シリーズを最初に読むことをお勧めします。 https://github.com/getify/You-Dont-Know-JS –

答えて

2

全体

(function(){ 


})() 

。したがって、omitting()は関数を定義するだけで呼び出すことはないので、あなたの角型アプリケーションは "store"モジュールを構成しません。

ここでの目的は、変数 "app"と他の変数がグローバル(ウィンドウ)コンテキストに漏れないようにスコープを作成することです。

すでにローカル関数コンテキストを追加しているwebpackのようなモジュールバンドラを使用すると、これが冗長になります。私はそれがあなたのアプリのすべての角度のファイルのスクリプトタグを持っているので、あなたにとって便利だと思います。

関連する問題