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']);
Related
I am trying to import a service to use it inside my controller, but inside console it is showing this error:
Uncaught SyntaxError: Unexpected token {
I am using Flask-Assets to minify javascript files.
This is my service and controller files contents:
app.service('metaCsrfToken', ['', function () {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
}]);
import { metaCsrfToken } from '../services/owasp'
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'metaCsrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, metaCsrfToken){
// .........
console.log(metaCsrfToken.get_token())
}]);
Full error path:
_app_scripts.js?93a3d221:100 Uncaught SyntaxError: Unexpected token {
100 import{metaCsrfToken}from'../services/owasp'
101 app.controller('call-center.controller',['$scope','$http','$window','$log','$compile','$timeout','$interval','toastr','$filter','metaCsrfToken',function($scope,$http,$window,$log,$compile,$timeout,$interval,toastr,$filter,metaCsrfToken){$scope.numberInput
102 console.log(metaCsrfToken.get_token())}]);
So finally i resolved the problem, just by creating a service and inject it into controller:
app.service('csrfToken', function csrfTokenFactory() {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
});
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'csrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, csrfToken){
// ......
console.log(csrfToken.get_token())
}]);
I don't know why import always gives that error!!!
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
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) {
}]);
This is the actual error message that I receive:
Uncaught Error: [$injector:unpr] Unknown provider: formsProvider <- forms <- SignupAcclaimController
this is at the start of my test file:
describe("SignUp", function() {
describe("SignupAcclaimController", function () {
beforeEach(module('CL.SignUp'));
var controller, SignupService, $state, scope, identity;
beforeEach(inject(function (_$controller_, _$state_, _SignupService_, _$rootScope_, _identity_) {
$state = _$state_;
scope = _$rootScope_.$new();
SignupService = _SignupService_;
identity = _identity_;
controller = _$controller_('SignupAcclaimController', {
$state: $state,
SignupService: SignupService,
identity: _identity_,
detailsForm: mocks.form
});
}));........
The error occurs when trying to set controller. mocks.form has been declared above this code.
The actual controller is:
(function() {
'use strict';
angular.module('CL.SignUp')
.controller('SignupAcclaimController', SignupAcclaimController);
SignupAcclaimController.$inject = ['$window', '$state', '$log', 'SignupService', 'identity', 'detailsForm', 'forms', '$rootScope', '$scope', '$timeout'];
function SignupAcclaimController($window, $state, $log, SignupService, identity, detailsForm, forms, $rootScope, $scope, $timeout) {
var vm = this, ........
If I change the injector functions signature to be the same as the method signature of the actual controller then expand the controller = to be
controller = _$controller_('SignupAcclaimController', {
$window: _$window_,
$state: $state,
$log: $log,
SignupService: SignupService,
identity: _identity_,
detailsForm: mocks.form,
forms: _forms_,
$scope: scope,
$rootScope: _$rootScope_,
$timeout: _$timeout_
then the error changes to :
Uncaught Error: [$injector:unpr] Unknown provider: formsProvider <- forms
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) {