Question

我正在尝试使用Angular开始的MEAN堆栈教程，甚至提供的示例代码也无效。代码显示而不是数据，例如。 “{{created_buy}}”而不是“大卫”。我是Angular的新手，所以我觉得我可能会遗漏一些明显的东西......

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: ''};
    };
});

Answer 1

您需要引用正确的js文件

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

但你提到了app.js，所以它应该是

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

WORKING DEMO

AngularJS示例代码显示代码而不是数据

1 个答案: