2016-09-23 93 views
0

我正在嘗試跟隨一個以Angular開頭的MEAN堆棧的教程,甚至所提供的示例代碼也不起作用。代碼顯示而不是數據,例如。 「{{created_buy}}」而不是「David」。我是新來的角,所以我覺得我可能會丟失一些東西明顯...AngularJS示例代碼顯示的代碼不是數據

main.html中:

<!--main.html--> 
<html> 
<head> 
    <title>Chirp</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 
    <script src="javascripts/chirpApp.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="stylesheets/style.css"> 
</head> 
<body ng-app="chirpApp"> 
<div id='main' class="container" ng-controller="mainController"> 
    <div class="col-md-offset-2 col-md-8"> 
     <div class="clearfix"> 
      <form ng-Submit="post()"> 
       <input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" /> 
       <textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea> 
       <input class="btn submit-btn pull-right" type="submit" value="Chirp!" /> 
      </form> 
      <div id="post-stream"> 
       <h4>Chirp Feed</h4> 
       <div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"> 
        <p>{{post.text}}</p> 
        <small>Posted by @{{post.created_by}}</small> 
        <small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

app.js:

//chirpApp.js 
var app = angular.module('chirpApp', []); 

app.controller('mainController', function($scope){ 
    $scope.posts = []; 
    $scope.newPost = {created_by: '', text: '', created_at: ''}; 

    $scope.post = function(){ 
     $scope.newPost.created_at = Date.now(); 
     $scope.posts.push($scope.newPost); 
     $scope.newPost = {created_by: '', text: '', created_at: ''}; 
    }; 
}); 

回答

0

您需要參考的正確的js文件

<script src="javascripts/chirpApp.js"></script> 

,但你所提到的app.js,所以它應該是

<script src="javascripts/app.js"></script> 

WORKING DEMO

+0

答案是比這還要笨,但基本上我做錯了什麼,謝謝!在javascript中是不是javascripts – DAnsermino

+0

3個字母與1個字母,只是使它更普通。請注意,標記爲回答的時間限制,我現在已經完成了 – DAnsermino