-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;">
☰
</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"'
);
};
}]);
}
奇蹟,如果任何谷歌搜索已完成預 - 發佈消息http://stackoverflow.com/questions/24606190/unknown-provider -bprovider-b – Vahid