I am new to AngularJS and I am trying to follow some structure for scalable applications, as well as trying to get Firebase working. However, I am getting a simple error on the injector. When I view the error tree, it seems to be all AngularJS references, and I do not see a reference to an object in my code. I guess I am looking in the wrong place?
Failed to instantiate module MyApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.11/$injector/unpr?p0=e
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:36:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:37:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:301)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:425
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:202)
at Ob (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:435
This is my Plunkr sample
It seems you don't get $scope right.
For routeProvider, it's templateUrl instead of templateURL. For TeamCtrl, if you want to bind a object to View, remember to add this object to $scope.
angular.module('MyApp').config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'TeamCtrl',
templateUrl: 'team.html'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('MyApp').controller('TeamCtrl', ['$scope', '$firebase', 'Teams',
function ($scope, $firebase, Teams) {
$scope.Teams = Teams;
$scope.team = {};
$scope.SaveTeam = function(team) {
$scope.Teams.$add({
Id: $scope.team.id,
Name: $scope.team.Name,
Wins: $scope.team.Wins,
Losses: $scope.team.Losses
});
};
$scope.team.id = "";
$scope.team.Name = "";
$scope.team.Wins = "";
$scope.team.Losses = "";
}
]);
For team.html
<div ng-repeat="team in Teams">
<h2>{{team.Name}}</h2>
{{team.Wins}} / {{team.Losses}}
</div>
Related
My app is working correctly, but AS SOON AS I add $stateParams in the controller I'm get this error:
angular.js:14791 Error: [$injector:unpr] Unknown provider: $stateParamsProvider <- $stateParams <- ClienteViniCtrl
This is from: app.js
.when('/clienti/:id_cliente', {
templateUrl: 'views/cliente-vini.html',
controller: 'ClienteViniCtrl'
})
This is from: controller.js
.controller('ClienteViniCtrl', function($scope, $stateParams, Vini){
Vini.getWines($stateParams.id_cliente).then(function (result) {
$scope.vini = result;
})
What's the problem?
Do you have added angular-ui-router.js at your project?
var myApp = angular.module('myApp', ['ui.router']);
I tried out this tutorial jsFiddle link
I put this code in my angular controller
$scope.show = function () {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function (modal) {
modal.element.modal();
modal.close.then(function (result) {
$scope.message = "You said " + result;
});
});
};
but i keep getting the error message:
TypeError: Cannot read property 'showModal' of undefined
I would like to know where is this ModalService and how do I get it to work on my project.Thank you
You have to install a library in order to use that ModalService. You can download the library from the original github repository. After installed, add angularModalService to your angular module and inject ModalService to your controller.
So I'm attempting to learn Angular using a MEAN stack and I'm having an issue getting a simple app that I'm playing around with working again.
The specific error i'm getting right now is angular.js:38 Uncaught Error: [$injector:modulerr] and after hours of researching, troubleshooting, and banging my head I can't seem to get my app working again. It worked at one point with a very basic app.js but I've since changed it use an anonymous function and adjusted my controller.js and factory.js.
Here's the code for my app.js, factory.js, and controller.js
If anyone would be willing to assist me in locating what the issue is I'd greatly appreciate it!
app.js
(function(){
var iquueApp = angular.module('iquueApp', ['ngRoute', 'ngResource', 'iquueApp.iquueCtrl', 'iquueApp.iquueFactory'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/partials/property-dashboard.html',
controller: 'iquueCtrl'
}).when('/admin', {
templateUrl: '/partials/admin-dashboard.html',
controller: 'iquueCtrl'
}).when('/admin/property-setup', {
templateUrl: '/partials/admin-prop-setup.html',
controller: 'iquueCtrl'
}).when('/login', {
templateUrl: '/auth/login/login.html',
controller: 'iquueCtrl'
})
.when('/register', {
templateUrl: '/auth/register/register.view.html',
}).otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
})();
factory.js
angular.module('iquueApp.iquueFactory',[])
.factory('iquueFactory', function($http) {
var urlBase = '/api/hubs';
var _iquueService = {};
_iquueService.getHub = function() {
return $http.get(urlBase);
};
_iquueService.saveHub = function(secretKey) {
return $http.post(urlBase, secretKey);
};
_iquueService.updateHub = function(secretKey) {
return $http.put(urlBase, secretKey);
};
_iquueService.deleteHub = function(id) {
return $http.delete(urlBase + '/' + id);
};
return _iquueService;
});
controller.js
/Angular Controllers
angular.module('iquueApp.iquueCtrl',[])
.controller('iquueCtrl', function($rootScope, $scope, iquueFactory) {
$scope.hubs = [];
$scope.isEditable = [];
// get all hubs on Load
iquueFactory.getHub().then(function(data) {
$scope.hubs = data.data;
});
});
Thanks for the comments guys. This error was due to not loading angular-resource.js correctly. I resolved it shortly after posting this question.
what is the exact error? try to post the exact error as seen in the console. This will tell you what module or controller is causing the error..
like this one... here MyApp is where the error is...
Failed to instantiate module MyApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.11/$injector/unpr?p0=e
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:36:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:37:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:301)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:425
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:202)
at Ob (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:435
I am using the angular seed project and try to use ui-router for user login based routing.
I get following error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
at new $UrlMatcherFactory
...
My code in app.js is:
'use strict';
// Declare app level module which depends on views, and components
angular
.module('MyApp', [
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state("root", {
url: "",
template: "<section ui-view></section>",
controller: function($state, user) {
if ($state.is("root")) $state.go(user.loggedIn ? "main" : "login");
}
})
.state("login", {
templateUrl: "login/login.html",
controller: "LoginCtrl"
})
.state("main", {
templateUrl: "main/main.html",
controller: "MainCtrl"
});
}])
.controller("MainCtrl", function($scope, user, $state) {
$scope.user = user;
$scope.logout = function() {
user.loggedIn = false;
$state.go("root");
}
})
.controller("LoginCtrl", function($scope, user, $state) {
$scope.login = function() {
user.loggedIn = true;
$state.go("root");
}
});
I didn't find anything with Google and hope someone can help me here.
Best regards
Probably a solution here ?
See this link : https://github.com/ded/script.js/issues/86
I'm trying to to use the Angular UI Bootstrap module, in specific the Modal plugin.
My app-folder is structured in this way:
app
scheda
scheda.html
schedacontroller.js
app.js
css
...
index.html
This is app.js, the main app file:
// created the module GasistaFelice
// also included ngRoute for all our routing needs
angular.module('ngGasistaFelice', [])
.run(function($rootScope) {
$rootScope.gasID = "10"; //default value
});
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
GasistaFelice.config(['$routeProvider',function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'app/ordinare/ordinare.html',
controller : 'orderController'
})
// route for the paniere page
.when('/:id/gasmember/:id/basket', {
templateUrl : 'app/paniere/paniere.html',
controller : 'paniereController'
})
// route for the scheda page
.when('/:id/profile', {
templateUrl : 'app/scheda/scheda.html',
controller : 'schedaController'
})
// route for the conto page
.when('/:id/gasmember/:id/cash', {
templateUrl : 'app/conto/conto.html',
controller : 'contoController'
})
.otherwise({
redirectTo: '/'
});
}]);
exc....
This is the controller of the page in which i want to put the Modal plugin:
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
app.controller('schedaController', function ($scope, $routeParams, $modal, $log, $http) {
var id = $routeParams.id;
// --- URL finale ---
//var url = 'http://localhost:8000/gasistafelice/api/v1/person/id/?format=json';
//URL di prova
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
When i load the page containing the schedaController, i keep getting this error:
Error: [$injector:unpr] h ttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
at Error (native)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:6:450
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:431
at Object.c [as get] (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:499
at c (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at d (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:230)
at Object.instantiate (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:394)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:66:112
at http://localhost/GasistaFelice2_angular/js/angular.min.js:53:14
Thank you
You're defining angular.module('ngGasistaFelice', []) multiple times with different required modules (inside of the second parameter to the module function):
angular.module('ngGasistaFelice', [])
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
...specifically, the last one is the one you're trying to use ngRoute with, and you haven't even injected it there.
A better solution is to define it once, say:
var GasistaFelice = angular.module('ngGasistaFelice', [
'ui.bootstrap',
'ngRoute'
]);
And then you could do what you were trying to do:
GasistaFelice.controller(...);
Or, if you need this in another file (or scope) and GasistaFelice is not yet defined, you can get it by calling angular.module without passing the required dependencies, like:
var app = angular.module('ngGaistaFelice');
app.controller(...);
Since version 0.14.0 angular team prefixed all components you have to use, look more. For your case you need
Change: $modal for $uibModal.
Change: $modalInstance for $uibModalInstance.
Change: modal-transclude for uib-modal-transclude