Search code examples
angularjsangularjs-module

Angularjs module error

I am new to angularJs, trying to make app which use camera and save images in firebase. I am following one tutorial and getting this error. I tried to fix it but it didn't work out. Pls help guys.

I posted my code on github. https://github.com/brunocoder/ImageApp

Uncaught Error: [$injector:modulerr] 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.

This is 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>

This is the error I am getting

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)

Thanks

Solution

  • You've got the ionic bundle already specified which includes Angular by default. Remove your reference to angular, angular-route and few others and you should be good to go!