Javascript 脚本不'；t load：将AngularJS与JSON（Firebase）一起使用_Javascript_Json_Angularjs

Javascript 脚本不'；t load：将AngularJS与JSON（Firebase）一起使用

javascript json angularjs

Javascript 脚本不'；t load：将AngularJS与JSON（Firebase）一起使用,javascript,json,angularjs,Javascript,Json,Angularjs,我尝试构建一个应用程序，让您将数据输入多个字段，使用AngularJS将数据放入Firebase JSON，并将数据输出到布局精美的“卡片”中最初我可以输入和输出数据，但当我将其连接到AngularJS和Firebase时，我的浏览器中的“3”就变成了“{1+2}}” 我正在我的Web服务器上运行这段代码，我希望您能帮助我找出问题所在–页面几乎是空白的。所有依赖于角度的东西都不会出现链接到live页面：这是我的密码： index.html <html lang="en" ng-ap

我尝试构建一个应用程序，让您将数据输入多个字段，使用AngularJS将数据放入Firebase JSON，并将数据输出到布局精美的“卡片”中

最初我可以输入和输出数据，但当我将其连接到AngularJS和Firebase时，我的浏览器中的“3”就变成了“{1+2}}”

我正在我的Web服务器上运行这段代码，我希望您能帮助我找出问题所在–页面几乎是空白的。所有依赖于角度的东西都不会出现

链接到live页面：

这是我的密码：

index.html

<html lang="en" ng-app="repertoire">
<head>
    <meta charset="utf-8">
    <title>Repertoire Beta</title>

    <!-- STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />

    <!-- SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/angular.js"></script>
    <script type="text/javascript" src="assets/js/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/venues.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

  <body ng-controller="VenueController as venueCtrl">

    <p class="ANGULAR_TEST">1 + 2 = {{ 1 + 2 }}</p>

    <header class="card">
        <h1>repertoire</h1>
    </header>

    <venue-list></venue-list>

    <venue-form></venue-form>

    <footer id="info" class="card" ng-include="'footer.html'"></footer>

  </body>
</html>

<section class="card" id="venueList">
<h2 class="venue_name">{{venueCtrl.venue.name}}</h2>
<h3 class="venue_location">{{venueCtrl.venue.location}}</h3>
<div class="pricecat">
    <span class="venue_price">{{venueCtrl.venue.price}}</span>
    <span class="venue_category">{{venueCtrl.venue.species}} {{venueCtrl.venue.genre}}</span>
</div>
<p class="venue_description">{{venueCtrl.venue.description}}</p>
<p class="venue_tags">{{venueCtrl.venue.tags}}</p>
</section>

<section class="card" id="venueForm">
<form name="venueForm" ng-controller="VenueController as venueCtrl" ng-submit="venueForm.$valid && venueCtrl.venueForm(info)" novalidate>
    <input ng-model="venueCtrl.venue.name" type='text' class="input" id='nameInput' placeholder='Venue Name' required/>
    <input ng-model="venueCtrl.venue.location" type='text' class="input" id='locationInput' placeholder='Address' required/>
    <select ng-model="venueCtrl.venue.price" type='text' class="input" id='priceInput' ng-options="price for price in [$,$$,$$$,$$$$]">
        <option value="">Price</option>
    </select>
    <input ng-model="venueCtrl.venue.genre" type='text' class="input" id='genreInput' placeholder='Category'/>
    <input ng-model="venueCtrl.venue.species" type='text' class="input" id='speciesInput' placeholder='What kind?'/>
    <textarea ng-model="venueCtrl.venue.description" type='text' class="input" id='descriptionInput' placeholder='Description'></textarea>
    <input ng-model="venueCtrl.venue.tags" type='text' class="input" id='tagsInput' placeholder='Who did you go with?'/>
    <label>Have you already been?</label>
    <input ng-model="venueCtrl.venue.check" type="checkbox" checked />

    <div> venueForm is {{venueForm.$valid}} </div>
    <input type="submit" value="Add Venue"/>
</form>
</section>

曲目场馆.js

(function() {

var app = angular.module('repertoire', ['repertoire-venues']);

//var app = new Firebase('https://xyz.firebaseio.com/');

app.controller("VenueController", ['$http', function($http){
    var venue = this;
    venue.info = [ ];

    $http.get('venues.json').success(function(data){
        venue.info = data;
    });
}]);

})();

(function() {
var app = angular.module('repertoire-venues', []);

app.directive('venueList', function(){
   return {
       restrict: 'E',
       templateUrl: 'venue-list.html'
   }; 
});

app.directive('venueForm', function(){
   return {
       restrict: 'E',
       templateUrl: 'venue-form.html'
       controller: function(){
           this.venue = {};

           this.venueForm = function(info){
               info.venues.push(this.venue);
               this.venue = {};
            };
       },
       controllerAs: 'venueCtrl'
   }; 
});

})();

非常感谢您您在索引页面中包含了viouses.js而不是repertoire-viouses.js，并且repertoire-viouses.js的第14行缺少一个逗号为什么要多次加载AngualRJ？控制台上是否有任何错误？我无法让angularJS工作，我也尝试通过引导加载它@Satpal@Giwwel控制台抱怨我加载了三次angular。。。很抱歉，我3天前才开始学习Angular和JSON，我正在试图找出我犯了严重错误的地方。你能截图看看你看到的错误吗？您正在加载Angular 3次，这是不需要的。该文件名为Vinces.js