2015-07-02 40 views
-3

所以我剛剛通過幾個在線網站學習了AngularJS,並熟悉了基本的JS,HTML和CSS。我發現這3個學習相當簡單,但是對於AngularJS有點問題。我真的只是在開始,但有一個問題,爲什麼我輸入的代碼沒有返回所需的結果。我有兩個窗口(或文件...我不知道什麼是正確的詞彙在這裏)打開。一個名爲main.js的js和一個名爲index.html的索引文件。在main.js我:這個特定的AngularJS代碼有什麼問題?

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

    app.controller('MyController', function($scope) { 
     $scope.person = { 
     name: "Papa Bear" 
     }; 
    }); 

在索引文件中我有:

<!doctype html> 
<html ng-app='myApp'> 
    <head> 
    <script src='js/main.js'></script> 
    </head> 
    <body> 
    <h2> Hi there </h2> 
<div ng-controller='MyController'> 
    {{ person.name }} 
</div> 
    </body> 
    <html> 

的 「你好」 顯示就好了。但是,我相當確定的{{person.name}}應該返回:Papa Bear只是簡單地顯示爲「{{person.name}}」。我的代碼中的錯誤在哪裏,它不是連接person.name到爸爸熊?

+2

目前還不清楚您的索引文件中是否包含'angular'腳本?它看起來不像你發佈的內容。 – kaveman

+2

檢查您的瀏覽器的JS /錯誤控制檯。你的'module'中有一個錯字,它應該是'angular.module('myApp',[])'(你在模塊名後加了一個額外的')' – Phil

回答

0

是的,就像卡夫曼指出的那樣,你必須包含角文字才能工作。嘗試添加到頭:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

然後看看是否有效。

編輯 另外,我只注意到(感謝Bhojendra尼泊爾),這一點:

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

應該是:

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

angular.module需要的應用程序的名稱作爲第一個參數,以及一系列依賴關係作爲第二個參數,以創建一個新的角度模塊。如果沒有依賴關係數組的第二個參數,它將返回該名稱的現有角度模塊。

因此可選的,而不是你的分配模塊,一個變量,你可以這樣做:

angular.module('myApp',[]); 

angular.module('myApp').controller('MyController',function($scope){ 
    $scope.person = { 
     name: "Papa Bear" 
    }; 
}); 

https://docs.angularjs.org/api/ng/function/angular.module

+0

也刪除多餘'''' –

+0

所以我總是需要添加一個以連接到AngularJS程序?我怎麼知道每次特別使用哪一個?還是有一個我可以隨時使用的? –

+0

您始終需要包含角庫,可以通過CDN鏈接或通過服務器上庫的副本。如果您縮小/連接角度文件,則提供自己的副本可能會有幫助,但使用CDN具有用戶可能訪問過使用CDN的網站的好處,因此該庫可能已被緩存。因此,他們根本不需要下載它,他們只需使用緩存中的版本,加快了頁面加載時間。 – Anonmily

0

http://jsfiddle.net/y17Lehqg/

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

app.controller( 'myController的',函數( $ scope){ $ scope.person = { name:「爸爸熊」 }; });