编辑 : 这个问题已经解决了。由于 Firefox https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch 中的这个问题，我发现在 ui-router 中使用“watch”作为我的一个状态的名称存在问题.
滚动到该问题的底部以查看 main.js 文件中的最终编辑。
所以我创建了一个 Angular 应用程序(版本 1.5.7)您可以在此处 checkout 项目文件和实时部署链接 -> https://github.com/StephenGrable1/AngularJS-Single-Page
它在 Chrome 和 Safari 中完美运行。但是，在 Firefox 中，我收到错误 $injector:modulerr。
控制台中的错误提供了指向 Angular 文档的一部分的链接，内容如下:“无法实例化模块单页应用程序，原因是:
queued.shift 不是一个函数”。我已经注入(inject)了我的依赖项以获得良好的实践，但这仍然不能解决 Firefox 中的问题。
以下是我的两个主要 Angular 文件。
这是我的 Controller /contactCtrl.js
angular
.module('Single-Page-App')
.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
$scope.contact = {name : '', email : '', subject : '', message : ''};
var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);
...
这是我使用 ui-router 的 js/main.js
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url:"/home",
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
})
.state("listen", {
url:"/listen",
views: {
"main@": {
templateUrl: "partials/listen.html"
}
}
})
.state("watch", {
url:"/watch",
views: {
"main@": {
templateUrl: "partials/watch.html"
}
}
})
.state("contact", {
url:"/contact",
views: {
"main@": {
templateUrl: "partials/contact.html"
}
}
}
}])
我想成为一名优秀的程序员并关注跨浏览器功能(我知道令人印象深刻的权利)，所以我想找出如何为自己和其他可能遇到这个问题的人解决这个问题。
更新 :这是我的 index.html 底部的脚本顺序
<script src="js/angular-1.5.7/angular.js"></script>
<script src="js/angular-1.5.7/angular-ui-router.js"></script>
<script src="js/angular-1.5.7/angular-messages.js"></script>
<!-- Our Custom Javascripts -->
<script src="js/main.js"></script>
<script src="controllers/contactCtrl.js"></script>
<script src="js/footer.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="js/bootstrap.min.js"></script>
我修改了 Controller 以使用 var“app”，如下所示:
app.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
$scope.contact = {name : '', email : '', subject : '', message : ''};
但是 Firefox 中仍然存在错误:/
更新 :
当我在 ng-app 中删除名称时，应用程序会很好地显示在 Firefox 浏览器中，但路由不起作用， Angular Controller 也不起作用。下面是解决 Firefox 错误但破坏 Angular 功能的代码。
<!DOCTYPE html>
<html lang="en" ng-app> <!-- When I rename to np-app="Single-Page-App" it breaks in Firefox. -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Single Page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div ng-include="'templates/header.html'"></div>
<div ui-view="main"></div><!-- This is where the website content gets inserted -->
<div ng-include="'templates/footer.html'"></div>
<script src="js/angular-1.5.7/angular.js"></script>
<script src="js/main.js"></script>
<script src="js/angular-1.5.7/angular-ui-router.js"></script>
<script src="js/angular-1.5.7/angular-messages.js"></script>
<!-- Our Custom Javascripts -->
<script src="js/main.js"></script>
<script src="controllers/contactCtrl.js"></script>
<script src="js/footer.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
更新:问题已解决!!!
显然，我的一个州的“watch”名称导致了错误，所以我将其切换为“watchHere”，它可以在 Firefox 中使用!此名称更改修复了错误!在 future ，我希望这可以为一些可怜的流浪灵魂节省一些时间。
var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
var home = {
name: 'home',
url: '/home',
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
}
var listen = {
name: 'listen',
url: '/listen',
views: {
"main@": {
templateUrl: "partials/listen.html"
}
}
}
var contact = {
name: 'contact',
url: '/contact',
views: {
"main@": {
templateUrl: "partials/contact.html"
}
}
}
var watchHere = {
name: 'watchHere',
url: '/watch',
views: {
"main@": {
templateUrl: "partials/watch.html"
}
}
}
$stateProvider.state(home);
$stateProvider.state(listen);
$stateProvider.state(contact);
$stateProvider.state(watchHere);
}])
angular.bootstrap(document, ['Single-Page-App']);
最佳答案
修改订单代码
主.js
// first LINE
var app = angular.module('Single-Page-App', ['ui.router', 'ngMessages']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url:"/home",
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
})
.state("listen", {
url:"/listen",
views: {
"main@": {
templateUrl: "partials/listen.html"
}
}
})
.state("watch", {
url:"/watch",
views: {
"main@": {
templateUrl: "partials/watch.html"
}
}
})
.state("contact", {
url:"/contact",
views: {
"main@": {
templateUrl: "partials/contact.html"
}
}
}
}])
var "app"是你的模块
文件 Controller .JS
app.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
$scope.contact = {name : '', email : '', subject : '', message : ''};
和订单文件
1. <script src="angular.min.js">
2. <script src="main.js">
3. <script src="controller.js">
并在 MAIN 中使用此结构:
app.config(['$stateProvider',function($stateProvider ) {
var home = {
name: 'home',
url: '/home',
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
}
var contact = {
name: 'contact',
url: '/contact',
views: {
"main@": {
templateUrl: "partials/watch.html"
}
}
}
var example = {
name: 'example',
url: '/example',
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
}
var example2 = {
name: 'example2',
url: '/example2',
views: {
"main@": {
templateUrl: "partials/home.html"
}
}
}
$stateProvider.state(home);
$stateProvider.state(contact);
$stateProvider.state(example);
$stateProvider.state(example2);
}])
关于angularjs - Angular 应用程序在 Firefox 中中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39260298/