When I try to add $scope in the below give code I am getting error
angular.module('starter', ['ngRoute', 'ngAnimate', 'myApp.controllers'])
.run(['$window', '$location', '$rootScope', '$scope', function ($window, $location, $rootScope, $scope) {}]);
Error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope
you can't inject $scope to the run component. alternatively, you have to use the $rootScope.Because top-level scope is rootScope and all child scope is inherit from it
angular.module('starter', ['ngRoute', 'ngAnimate', 'myApp.controllers'])
.run(['$window', '$location', '$rootScope', function ($window, $location, $rootScope) {
}]);
Related
I am new to Angular JS. I have created factory as follows.
angular.module('login',[])
.factory('authFactory',[function(){
// logic
}] );
and have injected into controller, but it gives me an error.
I also provided this factory file in index.html, but the error is the same.
[$injector:unpr] Unknown provider: authFactoryProvider <- authFactory
What should I do to avoid this?
Below is the code where I have injected it.
(function () {
'use strict';
angular.module('login', []).controller("LoginController", loginController)
loginController.$inject = ['$cookies', '$log', '$scope', '$rootScope', '$q', '$location', '$timeout', '$window',authFactory];
function loginController($cookies, $log, $scope, $rootScope, $q, $location, $timeout, $window,authFactory) {
Did you mean this? (you are missing '')
loginController.$inject = ['$cookies', '$log', '$scope',
'$rootScope', '$q', '$location', '$timeout', '$window', 'authFactory'];
Don't create module twice:
angular.module('login', [])
.factory('authFactory',[function(){
// logic
}] )
angular.module('login').controller("LoginController", loginController)
Don't use module twice make it as your practice to code like this
(function () {
'use strict';
var login = angular.module('login',[]);
login.factory('authFactory',[function(){
// logic
return {
}
}]);
login.controller("LoginController", loginController);
loginController.$inject = ['$log', '$scope', '$rootScope', '$q', '$location', '$timeout', '$window','authFactory'];
function loginController($log, $scope, $rootScope, $q, $location, $timeout, $window,authFactory) {
}
})();
As you are new to angular, i would recommend you to go through this youtube video which is very good
https://www.youtube.com/watch?v=FDhGmFul4YU&index=2&list=PLvZkOAgBYrsS_ugyamsNpCgLSmtIXZGiz
Here I have my RestaurantList service as follows
var restaurantList = angular.module("service.restaurantList", []);
restaurantList.service('RestaurantListService', ['$rootScope', 'BackendService', 'toaster', '$cookieStore', 'getConstants', 'principal', '$state',
function ($rootScope, BackendService, toaster, $cookieStore, getConstants, principal, $state) {
/*
*/
}])
I have my code for the reservation.js as follows
var app = angular.module('reservation', ['angularMoment']);
app.controller('ReservationController',['$scope', 'ngDialog', 'BackendService','ReservationService','RestaurantListService', '$rootScope', 'toaster', "$timeout", "checkEmpty",
"$interval", "principal",
function ($scope, ngDialog, BackendService, ReservationService,RestaurantListService, $rootScope, toaster, $timeout, checkEmpty, $interval, principal) {
/*
*/
}])
In the Reservation Controller I am injecting ReservationList service. Now it gives the error
angular.js:12798 Error: [$injector:unpr] Unknown provider: RestaurantListServiceProvider <- RestaurantListService <- ReservationController
That error is coming because you are having your service defined in a separate module. Here you are defining two modules for your application ('service.restaurantList' & 'reservation') . Try to add the dependency of child module in to your parent module like this.
var app = angular.module('reservation', ['angularMoment', 'service.restaurantList']);
I was working with only 1 factory in angular, but now that my project has grown too large, I want to split the file in separate factories.
My factories are like this:
angular.module('factories')
.factory('auth', ['$http', '$state', '$window',
function($http, $state, $window) {
var auth = {};
......
return auth;
Userfactory:
angular.module('factories')
.factory('userFactory', ['$http', '$state', '$window',
function($http, $state, $window) {
var userFactory = {};
return userFactory;
I inject them in my controllers:
angular.module('controllers')
.controller('UserCtrl', ['$scope', '$state', 'auth', 'userFactory', 'Facebook',
function ($scope, $state, auth, userFactory, Facebook) {
However I get the following error:
Error: [$injector:unpr]
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=userFactoryProvider%20%3C-%20userFactory%20%3C-%20UserCtrl
I'm also bootstrapping my factories:
angular.module('factories', []);
And I inject factories into app.js:
var app = angular.module('eva', ['ui.router', 'ngMaterial', 'ngMessages',
'controllers', 'factories', 'ngAnimate', '720kb.socialshare',
'angular-loading-bar', 'angular-svg-round-progress', 'pascalprecht.translate',
'facebook']);
What is the proper way to work with multiple factories?
Check if you imported the script into your index file. You need files from both of services to be imported after the angular.js file.
Since factories are in a separate module so you need to set dependency for controller module because it is using factories from factories module.
Do something like
angular.module('controllers', ['factories'])
.controller('UserCtrl', ['$scope', '$state', 'auth', 'userFactory', 'Facebook',
function ($scope, $state, auth, userFactory, Facebook) {
I have stripped my app down to the bare bones but I keep getting this error when using $parse: TypeError: object is not a function
What is wrong? What am I missing?
Seems to work fine in this plunker: http://plnkr.co/edit/WrXv9hT5YA0xYcLLvyDb
Could parse be conflicting with some other module?
Weirder still - it actually does change the value of $scope.modal.on! Even though it appears to die before hand...
/* Controllers */
//var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap', 'ui.sortable']);
var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap']);
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal, $log) {
$scope.modal = {
open : false,
tplfile : null,
toggle : function(){
this.open = !this.open;
if(this.open) angular.element('body').addClass('modal-open');
else angular.element('body').removeClass('modal-open');
}
};
var modal = $parse('modal.open');
modal.assign($scope, true);
}]);
You passed in your dependencies in the incorrect order. The dependencies to the function have to match exactly the order in the array.
MyApp.controller('MyController',
['$scope', '$http', '$modal', '$parse', function
($scope, $http, $parse, $modal, $log) {
If you swap $parse and $modal in your controller declaration, your error will go away. Also, you are missing $log, if you try to use that dependency you will get an error as well.
['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal,
The $parse and $modal are interchanged.
Please correct the order and it will work :)
It should be
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', '$log', function($scope, $http, $modal, $parse, $log) {
I'm new to angularjs and I'm working on a single page-app. I'm getting this error message that doesnt tell me where in my code that's throwing this error and I've went on angularjs' website to look up the error but I dont understand it.
This is the error message I'm getting,
Error: [ng:areq] http://errors.angularjs.org/1.2.8/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%string
Any ideas on what might be throwing this error? Thanks
Edit: The error might have something to do with the way I declare my modules but I still can't figure it out. Here's a sippet of my code ...
var user = angular.module('user', ['ui.bootstrap','ngResource']);
user.controller("user", ["$scope", "$resource", "$location", '$state',
function($scope, $resource, $location, $state) { }]);
var saveObject = angular.module('saveObject', ['ui.bootstrap','ngResource'])
.factory('savedObject', function($resource) {});
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
var route = angular.module('route', ["ui.router", 'ngResource', 'saveUser'])
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {});
route.controller('add_userController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, saveUser) {}]);
route.controller('add_familyController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', '$window', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, $window, saveUser) {}]);
Your service definition seems to be messed up:
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
should be maybe
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', ['savedObject', function(savedObject) {}]);