Angularjs模块错误

时间:2016-02-06 03:07:38

标签: angularjs angularjs-module

我是angularJs的新手,试图制作使用相机的应用程序并在firebase中保存图像。我正在关注一个教程并得到此错误。我试图解决它,但它没有成功。请帮助。

我在github上发布了我的代码。 https://github.com/brunocoder/ImageApp

未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块myApp: 错误:[$ injector:nomod]模块'myApp'不可用!您要么错误拼写了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。

这是index.html

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title></title>

      <link href="lib/ionic/css/ionic.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
      <script src="angular.min.js"></script>
      <script src="js/angular-route.min.js"></script>
      <script src="lib/ionic/js/ionic.bundle.js"></script>
      <script src="js/ng-cordova.min.js"></script>
      <script src="cordova.js"></script>
      <script src="js/firebase.js"></script>
      <script src="js/angularfire.min.js"></script>
      <script src="js/app.js"></script>
    </head>
    <body ng-app="myApp">

      <ion-pane>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>
    </body>
  </html>

app.js

'use strict';
var imageApp = angular.module("myApp", ['ionic', 'ngCordova', 'ngRoute', 'firebase']);
var fb = new Firebase("myFirebaseAccountId");



imageApp.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});
imageApp.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
    .state("firebase",{
      url : "/firebase",
      templateUrl : "templates/firebase.html",
      controller : "FirebaseController",
      cache : false
    })
    .state("secure",{
      url : "/secure",
      templateUrl : "templates/secure.html",
      controller : "SecureController",
    });
    $urlRouterProvider.otherwise("/firebase");
});

imageApp.controller("FirebaseController", function($scope, $state, $firebaseAuth){
  var fbAuth = $firebaseAuth(fb);
  $scope.login = function(username, password){
    fbAuth.$authWithPassword({
      email : username,
      password : password
    }).then(function(authData){
      $state.go("secure");
    }).catch(function(error){
      console.error("Error : "+error);
    });
  }
  $scope.register = function(username, password){
    fbAuth.$createUser({email:username, password:password}).then(function(userData){
        return fbAuth.$authWithPassword({
          email:username,
          password: password
        });
    }).then(function(authData){
      $state.go("secure");
    }).catch(function(error){
        console.log("Error : " +error);
    });
  }
});

imageApp.controller("SecureController", function($scope, $ionicHistory, $firebaseArray, $cordovaCamera){
  $ionicHistory.clearHistory();
  $scope.images= [];
  var fbAuth = fb.getAuth();
  if fbAuth(){
    var userReference = fb.child("users/" + fbAuth.uid);
    var syncArray = $firebaseArray(userReference.child("images"));
    $scope.images = syncArray;
  }else {
    $state.go("firebase")
  }

  $scope.upload = function(){
    var option = {
      quality : 75,
      destinationType : Camera.DestinationType.DATA_URL,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType : Camera.encodingType.JPEG,
      popoverOptions : CameraPopoverOptions,
      targetWidth : 500,
      targetHeight : 500,
      saveToPhotoAlbum : false,
    }
    $cordovaCamera.getPicture(options).then(function(imageData){
      syncArray.$add({image:imageData}).then(function(){
        alert("The image was saved.");
      });
    }, function(error){
        console.error( "Error: " + error);
    });
  }
});

firebase.html

 <ion-view  title="Firebase">
   <ion-content>
     <div class="">
         <div class="list list-inset">
           <label class="item item-input">
            <input ng-model="username" type="text" placeholder="username">
          </label>
          <label class="item item-input">
            <input ng-model="password" type="text" placeholder="password">
          </label>
        </div>
        <div class="padding-left padding-right">
            <div class="button-bar">
                <a class="button" ng-click="login(username, passowrd)">Login</a>
                <a class="button" ng-click="register(username, passowrd)">Register </a>

            </div>
        </div>
     </div>
   </ion-content>
 </ion-view>

secure.html

    <ion-nav-buttons side="right">
      <button class="button button-icon icon ion-camera" ng-click="upload()">Camera</button>
    </ion-nav-buttons>
    <ion-content>
      <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
          <img ng-src="data:image/jpeg;base64,{{images[$index].image}}" width = "100%" />
        </div>

        <div class="col col-25" ng-if="$index + 1 < images.length">
          <img ng-src="data:image/jpeg;base64,{{images[$index + 1].image}}" width = "100%" />
        </div>

        <div class="col col-25" ng-if="$index + 2 < images.length">
          <img ng-src="data:image/jpeg;base64,{{images[$index + 2].image}}" width = "100%" />
        </div>

        <div class="col col-25" ng-if="$index + 3 < images.length">
          <img ng-src="data:image/jpeg;base64,{{images[$index + 3].image}}" width = "100%" />
        </div>

      </div>
    </ion-content>
  </ion-view>

这是我得到的错误

Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=myApp
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13380:12
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15270:17
    at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15194:38)
    at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:15268:14)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17674:22
    at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13648:20)
    at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17658:5)
    at createInjector (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17584:11)
    at doBootstrap (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14942:20)
    at bootstrap (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:14963:12)

由于

1 个答案:

答案 0 :(得分:0)

您已经指定了离子束,默认情况下包含Angular。删除你对角度,角度路线和其他一些人的参考,你应该好好去!