问题已修复!!!

Question

修改：此问题已修复。我发现使用“watch”作为ui-router中某个州的名称存在问题，因为Firefox中的这个问题 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch。

滚动到此问题的底部，查看main.js文件中的最终修改。

所以我创建了一个 Angular应用程序（版本1.5.7）您可以在此处签出项目文件和实时部署的链接 - ＆gt; https://github.com/StephenGrable1/AngularJS-Single-Page

它在Chrome和Safari中运行良好。但是，在Firefox中我收到错误$ injector：modulerr。

控制台中的错误提供了一个指向Angular文档的一部分的链接，其中包含：“由于以下原因，无法实例化模块单页面应用程序： queued.shift不是一个函数“。我已经注入了我的依赖项以获得良好实践，但仍然没有解决Firefox中的问题。

以下是我的两个主要Angular文件。

这是我的控制器/ 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>

我修改了控制器以使用var“app”，如下所示：

app.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
        $scope.contact = {name : '', email : '', subject : '', message : ''};

但是Firefox中仍然存在错误：/

更新：当我在ng-app中删除名称时，应用程序在Firefox浏览器中显示正常，但路由不起作用，而角度控制器也没有。下面是解决Firefox错误但破坏角度功能的代码。

<!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>

更新：

问题已修复!!!

显然，我的一个州的“手表”名称导致了错误，因此我将其切换为“watchHere”，它可以在Firefox中运行！此名称更改修复了该错误！在将来，我希望这能节省一些可怜的流浪灵魂。

   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']);

Answer 1

修改订单代码

MAIN.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＆＃34; app＆＃34;你是模块

文件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);

    }])

Firefox中的Angular App破解

这是我的控制器/ contactCtrl.js

这是我使用ui-router

问题已修复!!!

1 个答案: