2016-04-03 203 views
-1

我在AngularJS中編寫webapp,後端使用Grails。

在開發應用程序時,我可以使用grails run-app對其進行測試,但是在將應用程序部署到WAR文件並將其放入Tomcat服務器時,它不起作用。以下是錯誤(打印到控制檯JS):http://errors.angularjs.org/1.4.8/ $噴油器/ unpr P0 = bProvider%20%3C-20B%

你可以看到一個真人版(在有限的時間)在這裏:http://test.neonorb.com/now/JKQXV

通常,該錯誤不會打印,並且您將看到正在發送的websocket消息(不在頁面上執行任何操作)。此外,直到採取行動請求該許可,紅色「釋放汽車」按鈕纔會顯示。

忽略頁面頂部的選項卡之類的東西,這不是去掉了一些測試代碼:)

下面源從生成的網站採取的,而不是源代碼:

HTML

<html xmlns:g="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <title> 

     Derby Now 

    </title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="/assets/tether.min-4186a131ed207fcfa437beada37e2c43.js" ></script> 

    <!-- Styles --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" 
      integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" 
      integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" 
      crossorigin="anonymous"></script> 

    <link rel="stylesheet" href="/assets/now-c4982049a08d396b941fb3f99cd2a262.css"/> 

    <!--AngularJS--> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 



    <meta name="layout" content="now"/> 

    <script src="//cdn.jsdelivr.net/sockjs/1.0.3/sockjs.min.js"></script> 
    <script type="text/javascript" src="/assets/stomp-ecc832be915b26d506ef5942177c9db1.js" ></script> 
    <script type="text/javascript" src="/assets/now-a8076e472f12cc0da0dae7cef46aa98d.js" ></script> 
    <script> 
     initNow("/stomp", "JKQXV"); 
    </script> 

</head> 
<body ng-app="derby-now"> 
<div class="body"> 

<header class="navbar navbar-light"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" 
      data-target="#navbar" style="font-size: 1.8rem; color: black; height: 3rem;"> 
     &#9776; 
    </button> 

    <ul class="nav nav-tabs hidden-xs-down" id="myTab"> 
     <li class="nav-item"> 
      <a class="nav-link" data-toggle="tab" href="#one">One</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" data-toggle="tab" href="#two">Two</a> 
     </li> 
    </ul> 

    <div class="collapse hidden-sm-up" id="navbar"> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#one">One</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#two">Two</a> 
      </li> 
     </ul> 
    </div> 
</header> 
<div class="tab-content"> 
    <div class="tab-pane fade" id="one">ONE TAB</div> 
    <div class="tab-pane fade" id="two">TWO TAB</div> 
</div> 
<script> 
    $('#myTab a:first').tab('show'); 

    // FIXME the below code does NOT work, and needs to be replaced with the ability to bind the two views for switching panes 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     e.target.tab('show'); // newly activated tab 
     e.relatedTarget.tab('hide'); // previous active tab 
    }); 
</script> 
<div style="overflow: hidden; background-color: rgb(0, 255, 111)"> 
    <div style="transform: translateY(40%); height: 100%"> 
     <div id="content" class="container" style="transform: translateY(-50%); width: 80%; max-width: 30em"> 
      <p>Derby ID: JKQXV</p> 
      <div ng-controller="ReleaseCarsController"> 
       <p> 
        <button class="btn btn-danger" ng-show="permissionReleaseCars" ng-click="releaseCars()"> 
         Release Cars 
        </button> 
       </p> 
       <p> 
        <button class="btn btn-success" ng-hide="permissionReleaseCars" 
          ng-click="requestPermissionReleaseCars()"> 
         Request Permission Release Cars 
        </button> 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

</div> 
</body> 
</html> 

/assets/now-a8076e472f12cc0da0dae7cef46aa98d.js

// ----- cookies ----- 

// sets a cookie 
function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
} 

// gets a cookie 
function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length,c.length); 
     } 
    } 
    return ""; 
} 

// ----- utils ----- 

// makes a HTTP GET request async 
function httpGetAsync(theUrl, callback) { 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
      callback(xmlHttp.responseText); 
     } 
    } 
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null); 
} 

function initNow(stomp, derbyId){ 
    var app = angular.module('derby-now',[]); 

    // initialize websocket 
    var socket = new SockJS(stomp); 
    var client = Stomp.over(socket); 

    // get IDs 
    var clientId = getCookie('derby-now-' + derbyId); 

    app.run(function($rootScope) { 
     // sets the derby and client IDs in a cookie for one (1) day 
     function setIdCookie() { 
      setCookie('derby-now-' + derbyId, clientId, 1); 
     } 

     // handles websocket messages 
     function messageHandler(message) { 
      var event = eval('(' + message.body + ')'); 
      var method = event.method; 

      switch(method) { 
       case 'granted': 
        var permission = event.permission; 

        switch(permission){ 
         case 'releaseCars': 
          $rootScope.permissionReleaseCarsGranted(); 
          break; 
         default: 
          console.log("unexpected permission grant: " + permission); 
        } 

        break; 
       case 'exception': 
        console.log('Server threw exception: ' + event.code); 
        break 
       default: 
        console.log("unexpected method: " + method); 
      } 
     } 

     // connects to the websocket so we can retrive messages 
     function connect() { 
      client.subscribe('/topic/now/' + derbyId + '/' + clientId, messageHandler); 
     } 

     client.connect({}, function() { 
      if(clientId == "") { 
       // ask the server for a client ID 
       httpGetAsync('/now/' + derbyId + '/init', function(response) { 
        clientId = response; 

        // set the cookie so we can get this later 
        setIdCookie(); 

        // connect to the websocket 
        connect(); 
       }); 
      } else { 
       // renew cookie 
       setIdCookie(); 

       // connect to the websocket 
       connect(); 
      } 
     }); 
    }); 

    // standard call to server 
    function call(message) { 
     client.send('/app/now', {}, '{' + 
       '"derbyId":"' + derbyId + '",' + 
       '"clientId":"' + clientId + '",' + 
       message 
       + '}'); 
    } 

    app.controller('ReleaseCarsController', ['$scope', '$rootScope', function($scope, $rootScope) { 
     $scope.permissionReleaseCars = false; 

     $rootScope.permissionReleaseCarsGranted = function() { 
      $scope.$apply(function(){ 
       $scope.permissionReleaseCars = true; 
      }) 
     } 

     $scope.releaseCars = function() { 
      call('"method":"releaseCars"'); 
     } 

     $scope.requestPermissionReleaseCars = function() { 
      call('"method":"requestPermission",' + 
       '"permission":"releaseCars"' 
       ); 
     }; 
    }]); 
} 
+0

奇蹟,如果任何谷歌搜索已完成預 - 發佈消息http://stackoverflow.com/questions/24606190/unknown-provider -bprovider-b – Vahid

回答

0

您的代碼是在生產精縮,您需要將您的通話run改變這一點:

app.run(['$rootScope', function($rootScope) { 
相關問題