文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Firefox中的角应用程序中断

问Firefox中的角应用程序中断
EN

Stack Overflow用户
提问于 2016-08-31 23:00:01
回答 1查看 3K关注 0票数 6

编辑：这个问题是固定的。由于火狐Objects/Object/watch中的这个问题，我发现在ui路由器中使用"watch“作为我的状态之一存在问题。

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

因此，我创建了一个角应用程序(1.5.7版)，您可以签出项目文件，并在这里查看到实时部署的链接-> https://github.com/StephenGrable1/AngularJS-Single-Page

它在Chrome和Safari中工作得很好。但是，在火狐中，我收到了一个错误$injector:modulerr。

控制台中的错误提供了指向角文档的一部分的链接，其内容是：“由于: queued.shift不是函数，无法实例化模块单页应用程序”。我已经为良好的实践注入了我的依赖关系，但这仍然不能解决Firefox中的问题。

下面是我的两个主要角度文件。

这是我的控制器/ConactCtrl.j

代码语言：javascript
复制
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']);

...

这是我的js/main.js，它使用ui-路由器

代码语言：javascript
复制
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底部的脚本顺序

代码语言：javascript
复制
<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“，如下所示：

代码语言：javascript
复制
app.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
        $scope.contact = {name : '', email : '', subject : '', message : ''};

然而，这个错误仍然存在于Firefox :/

UPDATE：当我删除ng应用程序中的名称时，应用程序在Firefox中显示得很好，但是路由不工作，角控制器也不工作。下面是解决Firefox错误的代码，但它破坏了不稳定的功能。

代码语言：javascript
复制
<!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“，而且它在火狐中工作！这个名字的改变修复了错误！在未来，我希望这能节省一些可怜的流浪灵魂的时间。

代码语言：javascript
复制
   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']);
angularjs
firefox
cross-browser
angular-ui-router
EN

回答 1

Stack Overflow用户

发布于 2016-08-31 23:19:07

修改订单代码

MAIN.js

代码语言：javascript
复制
 // 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

代码语言：javascript
复制
app.controller('contactCtrl', ['$scope', '$http', function($scope, $http){
    $scope.contact = {name : '', email : '', subject : '', message : ''};

和订单文件

代码语言：javascript
复制
1. <script src="angular.min.js">
2. <script src="main.js">
3. <script src="controller.js">

并主要使用这一结构：

代码语言：javascript
复制
    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);

    }])
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39260298

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档