Angularjs 模块错误
Angularjs module error
我是 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)
谢谢
您已经指定了 ionic bundle，默认情况下包含 Angular。删除对 angular、angular-route 和其他一些内容的引用，您应该可以开始了！
我是 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)
谢谢
您已经指定了 ionic bundle，默认情况下包含 Angular。删除对 angular、angular-route 和其他一些内容的引用，您应该可以开始了！