I'm trying to build a ionic object-oriented controller properly and am getting trouble with Service Injection...
angular.module('app.controllers', ['ionic', 'app.services.myservice']).controller('myCtrl', MyCtrl)
function MyCtrl($scope, $ionicLoading, MyService){
this.scope = $scope;
this.ionicLoading = $ionicLoading;
this.MyService = MyService;
}
MapCtrl.prototype.method1 = function($scope, $ionicLoading, MyService) {
//$scope, $ionicLoading and MyService are undefined
}
MapCtrl.prototype.method2 = function(){
this.scope.dummy = "A"; //That's ok!
this.MyService.aMethodWithCallBack(function(res){
//this.ionicLoading or this.MyService are undefined in this scope !
}
}
How would you handle it, properly?
I prefer next way
MyCtrl.$inject = ['$scope', '$ionicLoading', 'MyService'];
function MyCtrl($scope, $ionicLoading, MyService) {
// Act as ViewModel
var vm = this;
vm.method1 = function() {
MyService.getData().then(function(response) {
vm.data = response;
});
};
}
Your issue is that you did not inject the dependencies :
angular.module('app.controllers', ['ionic', 'app.services.myservice']).controller('myCtrl', ['$scope', '$ionicLoading', 'MyService', MyCtrl])
function MyCtrl($scope, $ionicLoading, MyService){
}
This should work
To make it more clear, I suggest you to declare controllers that way :
var controllers = angular.module('app.controllers', ['ionic', 'app.services.myservice']);
controllers.controller('myCtrl', ['$scope', '$ionicLoading', 'MyService', MyCtrl]);
function MyCtrl($scope, $ionicLoading, MyService){
}
Related
Im using gulp-concat to merge all angular js files into one but after running gulp task i get this error in chrome console on runing application :
angular.js:13708Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=userboxController&p1=not%20a%20function%2C%20got%20undefined
my gulp task :
gulp.task('scripts', function () {
return gulp.src(['js/app/*.js', 'components/*/*/*.js'])
.pipe(concat('appscript.js'))
.pipe(minify())
.pipe(gulp.dest('./dist/js/'));
});
and gulp-concat merges dedicated angular js files into appscript.js like:
angular.module('app',[]);
angular
.module("app", [])
.controller("paymentCtrl", ['$scope', '$http', function ($scope, $http) {
$http.get('data/payments.json').then(function (payments) {
$scope.payments = payments.data;
});
$scope.saveEntity = function () {
console.info("goog");
}
}]);
angular
.module("app",[])
.controller("userboxController", ['$scope', '$http',function ($scope, $http, usersService) {
usersService.getCurrentUser().then(function (user) {
$scope.user = user.data;
});
}]);
angular
.module("app",[])
.controller("usersController",['$scope', '$http','usersService', function ($scope, $http, usersService) {
usersService.getAll().then(function (users) {
$scope.users = users.data;
});
}]);
angular
.module("app", [])
.directive('usersGrid', function () {
return {
templateUrl : 'components/users/template/grid.html'
}
});
what's wrong with angular?!!
This is not a merge related problem.
You are making app modules every time with
angular.module('app', [])
You have to initialise module only one place and you will be using same module every time with ~ [] brackets.
Please find the plunker here
var myApp = angular.module('app');
myApp.controller("paymentCtrl", ['$scope', '$http', function($scope, $http) {
$http.get('data/payments.json').then(function(payments) {
$scope.payments = payments.data;
});
$scope.saveEntity = function() {
console.info("goog");
}
}]);
myApp.controller("userboxController", ['$scope', '$http', function($scope, $http, usersService) {
$scope.user = 'abc';
}]);
myApp.controller("usersController", ['$scope', '$http', 'usersService', function($scope, $http, usersService) {
usersService.getAll().then(function(users) {
$scope.users = users.data;
});
}]);
myApp.directive('usersGrid', function() {
return {
templateUrl: 'components/users/template/grid.html'
}
});
I got some problem when I'm trying to use an Angular service in the controlleur of my application.
When I'm trying to use function of my service in my controlleur, my console throw me an error :/
var app = angular.module('app', ['ngRoute'])
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/login', {
controlleur: 'login',
templateUrl: 'modules/login/login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
app.service('coreServices', [function () {
this.helloConsole = function () {
console.log("console services");
};
}]);
app.controller('loginController', ['$scope', '$http', '$rootScope', '$location', 'coreServices', LoginController]);
function LoginController($scope, $http, $rootScope, coreServices) {
var vm = this;
vm.helloConsole = coreServices.helloConsole;
vm.helloConsole();
}
angular.js:13708 TypeError: vm.helloConsole is not a function
at new LoginController
I link you this fiddle to show you how I do: https://jsfiddle.net/h8yaxLap/2/
The error throwed is:
angular.js:13708 TypeError: vm.helloConsole is not a function
at new LoginController
Well in your example angular will map $location to coreService in the injected parameters in the function. So I would go for
app.controller('loginController', ['$scope', '$http', '$rootScope', '$location', 'coreServices', LoginController]);
function LoginController($scope, $http, $rootScope, $location, coreServices)
Change service function to return object
app.service('coreServices', function () {
return {
helloConsole: function () {
console.log("console services");
}
};
});
You missed $location parameter for the controller
function LoginController($scope, $http, $rootScope,$location, coreServices)
I'm using angularJS and when I'm injecting a Factory I get error:
app.js :
angular.module('myapp', [])
myfactory.js :
angular.module('myapp', [])
.factory('httpService', function($http, $timeout) {
});
Controller: test.js :
angular.module('myapp', [])
.controller('test', function($scope, $timeout, $sce, $http, httpService) {
$scope.submit = function() {
}
});
When I add httpService I get error. Everything seems to be right, I even use this factory in all projects. Error:
angular.min.js:92 Error: [$injector:unpr] http://errors.angularjs.org/1.2.25/$injector/unpr?p0=httpServiceProvider%20%3C-%20httpService
at Error (native)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:6:450
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:36:202
at Object.c [as get] (http://localhost:81/chah/assets/js/angularjs/angular.min.js:34:305)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:36:270
at c (http://localhost:81/chah/assets/js/angularjs/angular.min.js:34:305)
at d (http://localhost:81/chah/assets/js/angularjs/angular.min.js:35:6)
at Object.instantiate (http://localhost:81/chah/assets/js/angularjs/angular.min.js:35:165)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:67:419
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:54:25
Check the link in your error (https://docs.angularjs.org/error/$injector/unpr?p0=httpServiceProvider%20%3C-%20httpService):
You create module multiple times:
angular.module('myapp', [])
You should do it once. Then use without []
angular.module('myapp').factory ...
angular.module('myapp').controller ...
The reason for the error is because in the creation of the httpService and the controller you have used the setter i.e. angular.module('myapp', []) syntax for the module and not the getter syntax. angular.module('myapp').
Angular requires us to define a module only once, thus the subsequent redefining causes the error.
So in app.js, define the module:
angular.module('myapp', []) ;
In myfactory.js use the getter Syntax by removing the , []:
angular.module('myapp')
.factory('httpService', function($http, $timeout) {
});
And in test.js:
angular.module('myapp')
.controller('test', function($scope, $timeout, $sce, $http, httpService) {
$scope.submit = function() {
}
});
Here is a link to the docs
yes,
what you are doing is re-creating your app
what you need to do is define it once and continue using that instance
var app = angular.module('myapp', []);
app.factory('httpService', function($http, $timeout) {
});
app.controller('test', function($scope, $timeout, $sce, $http, httpService) {
$scope.submit = function() {
}
});
or if you want to retrieve your app the syntax is angular.module('myapp')
this returns 'myapp', but adding [], tells angular to create an app and not fetch it
Code should look like below:
angular.module('myapp', [])
.factory('httpService', function($http, $timeout) {
});
.controller('test', function($scope, $timeout, $sce, $http, httpService) {
$scope.submit = function() {
}
});
I'm new to Angular and cannot pinpoint where I am going wrong. I'm just trying to simply inject my factory into my controller, reference said: "Cannot read property 'validar' of undefined". I have two files, ServiceUtil.js where have a service and CentroCustoCtrl.js where I'm trying to use service's function.
The function at ServiceUtil.js:
(function () {
'use strict';
angular.module('Services', [])
.service('ValidarFormulario', [function () {
this.validar = function (form) {
var valido = true;
//code
}
return valido;
}
}]);
})();
And CentroCustoCtrl.js
(function () {
'use strict';
var app = angular.module("start", ['AxelSoft', 'ngLocalize',
'ngLocalize.Config', 'mvComponentes','Services'])
.value('localeConf', {
basePath: '../Scripts/Locales', ...
...
});
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
$scope.Salvar = function () {
if (ValidarFormulario.validar(document.getElementsByTagName('input'))) { ...// Cannot read property 'validar' of undefined
);
I tried with factory , but not worked too:
angular.module('Services', [])
.factory('ValidarFormulario', [function () {
return{
validar : function (form) {
var valido = true;
//code
}
}
return valido;
}
}
}]);
})();
Please, I appreciate any help you can provide.
The problem is you had wrong dependency sequence inside DI inline array, basically they are mismatching in number and their sequences
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario',
//removed $rootScope, $timeout which wasn't used.
function ($scope, $http, ValidarFormulario) {
OR either way you could just add the dependency inside array, if they are really gonna used inside controller like below
app.controller('CentroCustoCtrl', ['$scope','$http','$rootScope','$timeout','ValidarFormulario',
function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
Just change the below line of code
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
to
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
This should work.
Well, also I've saw that your controller injections are wrong. You have:
App.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario)
And you should have:
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope,$timeout, ValidarFormulario)
Injectors on "[ ]" must mach with function parameters.
When you set a module the syntax is:
angular.module('Services', [ here injections ])
But when you get a module to use it, syntax must be:
angular.module('Services')
I am trying to split a big controller. The way to go would be through factories, but since I am changing the DOM I should do it through controllers.
Then, what I am trying to achieve is to call a function defined in Cntrl2 from Cntrl1.
The example
html
<body ng-app="app">
<div ng-controller='Cntrl1'>
{{message}}
</div>
</body>
js
var myModule = angular.module('app', []);
angular.module('app').controller('Cntrl1',
['$scope', '$q', '$timeout', 'Share_scope',
function ($scope, $q, $timeout, Share_scope) {
Share_scope.process();
$scope.message = 'started';
}]);
angular.module('app').controller('Cntrl2',
['$scope', '$q', '$timeout', 'Share_scope',
function ($scope, $q, $timeout, Share_scope) {
Share_scope.x = function() {
alert('done');
}
}]);
angular.module('app').factory('Share_scope',
['$window', '$q',
function($window, $q) {
var x;
return {
process: function() {
return x;
},
};
}]);
The demo http://jsfiddle.net/T8rgv/7/
What I would expect is to define "var x" of the factory as the function of Cntrl2, and then execute this function through the factory when I call it from Cntrl1.
So, how to make this work? Is this approach correct? Or should I just change the DOM from a factory?
Cheers,
Gerard
Not knowing where in relation Cntrl2 is to Cntrl1, I would use emit or broadcast somewhat like this. Note from past experience I don't think it's a good idea to use two or more different modules in the same page.
var myModule = angular.module('app', []);
angular.module('app').controller('Cntrl1',
['$scope', '$q', '$timeout', 'myFactory',
function ($scope, $q, $timeout, myFactory) {
$scope.$emit('messageEvt','started');
myFactory.process().then(function() {
$scope.$emit('messageEvt','ended');
});
}]);
angular.module('app').controller('Cntrl2',
['$scope', '$q', '$timeout', $rootScope,
function ($scope, $q, $timeout, $rootScope) {
$rootScope.$on('messageEvt',function(e,msg) {
$scope.message = msg;
}
}]);
angular.module('app').factory('myFactory',
['$window', '$q','$timeout',
function($window, $q,$timeout) {
var x;
return {
process: function() {
var deferObj = $q.defer();
$timeout(function() {
deferObj.resolve(x);
});
return deferObj.promise;
},
};
}]);
I think better way to do this is by having factory maintain the model and both controllers updating it when needed.
I updated the fiddle to http://jsfiddle.net/hh5Cy/2/
angular.module('app').factory('Share_scope',
['$window', '$q',
function($window, $q) {
var x;
return {
getProcess: function() {
return x;
},
setProcess: function(value){
x = value;
}
};
}]);
Please let me know if I understood you wrongly.