没有在 AngularJS 中使用 Cordova 加载模块答案

【问题标题】：Module not loading in AngularJS with Cordova没有在 AngularJS 中使用 Cordova 加载模块
【发布时间】：2017-10-17 17:29:55
【问题描述】：

我使用了一个扩展平台 Yeoman's 构建了一个为 Cordova 包装的简单 AngularJS 应用程序。我还在为 iOS 和 Android 构建解决方案之前使用 Grunt 构建解决方案。

当我尝试注入一个在 Device Ready 上初始化以供我使用 inAppBrowser 的工厂时，我的问题不断出现。

我得到的错误是：

错误：$injector:modulerr 模块错误

这意味着我的模块没有被加载，我的模块是cordova。我已经阅读了关于 Angular 的依赖注入，并且过去没有遇到过问题。因此，我围绕 Angular 的要求设置模块，但仍然出现此错误。

我的工厂模块如下所示：

angular.module('App')
.factory('cordova',['$q', '$window', function ($q, $window) {
var d = $q.defer();
var resolved = false;

var self = this;
this.ready = d.promise;

document.addEventListener('deviceready', function(){
  resolved = true;
  d.resolve($window.cordova);
});

//Check event
setTimeout(function(){
  if(!resolved){
    if ($window.cordova) d.resolve($window.cordova);
  }
}, 3000);

return self;
}]);

然后是我的 App.js 文件：

angular
.module('angularCordovaApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
    controllerAs: 'main'
  })
  .otherwise({
    redirectTo: '/'
  });
});

由于我刚刚构建了应用程序，因此还没有那么多模块。最后一个是主控制器：

angular.module('angularCordovaApp')
.controller('MainCtrl', ['$scope', 'cordova', function($scope, cordova)
{
  cordova.ready.then(function(){
    Notification.alert('Cordova is ready');
    window.location = 'https://staging.hopeelc.com.au/dashboard/';
  });
}]);

Index.html 查看包含的脚本：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-cookies.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>



<!-- endbower -->
<!-- endbuild -->

<script>
  angular.element(document).ready(function () {
    if (window.cordova) {
      console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
      document.addEventListener('deviceready', function () {
        console.log("Deviceready event has fired, bootstrapping AngularJS.");
        angular.bootstrap(document.body, ['app']);
      }, false);
    } else {
      console.log("Running in browser, bootstrapping AngularJS now.");
      angular.bootstrap(document.body, ['app']);
    }
  });
</script>

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/services/cordova.js"></script>
    <!-- endbuild -->

I would simply like to find a solution to why my module is not loading properly.

【问题讨论】：

你使用的是哪个版本的AngularJS？？
@AkshayTilekar 我正在使用 1.xx
是否高于 1.6.* ？
@AkshayTilekar 确切的版本是 1.6.1

标签： javascript android ios angularjs cordova

【解决方案1】：

我认为问题是由于缺少 ngRoute 模块。从 1.1.6 版开始，它是一个单独的部分：Have a look here 尝试添加并重建它

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

【讨论】：

我已经包含了我已经更新的问题以显示我的 index.html
@Keeano 添加对“ngRoute”的依赖