I am trying to modularize my AngularJS application and put some services inside a Module.
Everytime I try to reference my Service there is an error saying:
Unknown provider: UtilsProvider <- Utils <- benutzerUebersichtController
My code is:
var utils = angular.module('Utils',[]);
utils.service('UtilsService', function () {
this.CurrentUser = 'Hello World';
});
var verwaltungApp = angular.module('verwaltungApp', ['Utils'])
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','Utils', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="verwaltungApp">
<div ng-controller="benutzerUebersichtController">
<span>{{Test}}</span>
</div>
</div>
You din't inject the service in your controller properly.
This :
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','Utils', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
should be:
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','UtilsService', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http,$filter, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
You are injecting this services in your controller:
['$scope', '$http', '$filter','Utils']);
But you are passing only these services:
function benutzerUebersichtController($scope, $http, UtilsService)
So your UtilsService is now your $filter inside your controller.
To correct you have to change to this.
function benutzerUebersichtController($scope, $http, $filter, UtilsService)
Related
i would like to reuse the code defined between the controllers
.controller('GenericController', ['$scope', '$controller', '$rootScope', '$dialogs', '$state', '$http', '$modal', '$q', '$timeout', 'projectFactory', 'projectPromise', 'phaseFactory', 'buFactory', 'stakeholderGroupFactory', 'ldapFactory', 'genericFactory', 'User',
function ($scope, $controller, $rootScope, $dialogs, $state, $http, $modal, $q, $timeout, projectFactory, projectPromise, phaseFactory, buFactory, stakeholderGroupFactory, ldapFactory, genericFactory, User) {
$scope.testing = function() {
console.log("Hello");
};
}]);
You can use the factory and create the object for the function to reuse it.
app.factory("sample",function(){
return function() {
console.log("Hello");
};
})
else collating multiple common functions
app.factory("commonFunctions",function(){
commonFunction1(){
console.log("common func1")
}
commonFunction2(){
console.log("common func2")
}
return {
commonFunction1: commonFunction1,
commonFunction1: commonFunction2
};
})
Used the $controller for the importing this fixed my issue
Newbie in Ionic and Angular.
I am trying to develop a test app and trying to use the factory function.
I did the design from Ionic Creator and trying to add my coding in to it.
Below is my controller file.
angular.module('app.controllers', [])
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
.controller('mainPageCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('historyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('firstrunCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('resultsCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('doctorCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('bookingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('appointmentCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
Below is my file that has the factory.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]
.factory('awesomeFactory', function($http) {
return {
GetUser: function() {
return $http.get("http addy return json object").then(function(response) {
//Process Stuff Here
return response;
});
},
}
})
);
I am getting 2 errors.
1. Error: awesomeFactory is undefined.
2. TypeError: (intermediate value).factory is not a function[Learn More]
I just don't know what I am doing wrong. Probably something small.
But any help is greatly appreciated.
Thank you in advance.
This is because here in this code
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
First you will have to do factory injection then try to create its instance
Try this
.controller('loadingCtrl', ['$scope', '$stateParams','awesomeFactory',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
This line of code does no let me sleep:
$scope.search = function (login) {
github.getUser(login).then(onUserResponse, onError);
};
Loading it up:
angular.module('lol')
.factory('github', github);
Returning two functions :
return {
getUser: getUser,
getRepos: getRepos
};
With this siganture:
var github = function ($http) {
Consumed by MainController:
var MainCtrl = function ($scope, github, $filter, $timeout, $intervel, $anchorScroll, $location) {
And not injected into it's dependencies:
MainCtrl.$inject = ['$scope', '$filter', '$interval', '$timeout', '$anchorScroll', '$location'];
With the app being loaded like this:
angular.module('lol', [])
.controller('MainCtrl', MainCtrl);
And all of this throw: TypeError: __tracer.traceFunCall(...) is not a function
i think you missed githubas second parameter in MainCtrl.$inject = ['$scope', 'github'...
also updated your jsbin here
code organization was complicating situation more than necesary.
Also from the looks of it you tried to do two modules quick example how it should be done here.
I keep getting '$scope is not defined' console errors for this controller code in AngularJS:
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
}
]);
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
Where in my AngularJS MVC files should I be looking at to find problems with the $scope not being defined properly?
For others who land here from Google, you'll get this error if you forget the quotes around $scope when you're annotating the function for minification.
Error
app.controller('myCtrl', [$scope, function($scope) {
...
}]);
Happy Angular
app.controller('myCtrl', ['$scope', function($scope) {
...
}]);
Place that code inside controller:-
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
Just put you $scope.create function inside your controller. Not outside !
$scope is only defined in controllers, each controller have its own. So write $scope outside your controller can't work.
Check scope variable declared after controller defined.
Eg:
var app = angular.module('myApp','');
app.controller('customersCtrl', function($scope, $http) {
//define scope variable here.
});
Check defined range of controller in view page.
Eg:
<div ng-controller="mycontroller">
//scope variable used inside these blocks
<div>
I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.
My question is about services holding data that is commonly required among controllers.
I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:
varianceService is not defined
Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.
Thanks in advance.
Here is an example of the code:
var app = angular.module(
'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
)
.service('varianceService', function () {
var variances = {};
return {
redirect: function (path) {
$location.path(path);
},
getHttpVariances: function (month1, month2) {
var url = "/Home/GetVariances?month_1=";
url += month1;
url += "&month_2="
url += month2;
url += "&forwardBilling=true"
$http.get(url).success(function (data) {
variances = data;
return data;
});
return {};
},
getVariances: function () {
return variances;
}
};
})
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/MainPage', {
templateUrl: 'mainpage.html',
controller: 'MainPageCtrl'
}).
when('/Variance/:type', {
templateUrl: 'variance.html',
controller: 'VarianceCtrl'
}).
otherwise({
redirectTo: '/MainPage'
});
}])
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
The problems lies in the bracket notation of injecting services in your function..
What you inject in the bracket notation must also be present in the function definition..
e.g.
controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {
}]);
so in relation to your code above.. it should be like this..
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.
Change this
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
to
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])