我正在用 AngularJS 编写一个网络应用程序，后端使用的是 Grails。
在开发应用程序时，我可以使用 grails run-app 对其进行测试，但是在将应用程序部署到 WAR 文件并将其放入 Tomcat 服务器时，它不起作用.这是错误(打印到 JS 控制台):http://errors.angularjs.org/1.4.8/ $injector/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"'
);
};
}]);
}
最佳答案
您的代码在生产中被缩小了，您需要将您的 run 调用更改为:
app.run(['$rootScope', function($rootScope) {
关于javascript - 错误 : $injector:unpr Unknown Provider : Unknown provider: bProvider <- b，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36385886/