Does anyone know if you can add a second service to an angular module?
It seems when I try, I end up breaking angular.
This Works:
var MyModule = angular.module('MyModule',[]);
MyModule.service('MyService',function(){
this.message = 'checking in';
});
MyModule.controller('MyController', function($scope,MyService){
console.log(MyService.message);
});
// output
// checking in
This DOES work: I had an issue elsewhere in my code. I'm leaving this up because it is still hard to find angular documentation with two services being applied (which I promise I looked for)
var MyModule = angular.module('MyModule',[]);
MyModule.service('MyService',function(){
this.message = 'checking in';
});
MyModule.service('MyServiceTwo',function(){
this.message = 'checking in';
});
MyModule.controller('MyController', function($scope,MyService,MyServiceTwo){
console.log(MyService.message);
});
// no output
In your second service definition just retrieve the module - don't redefine it:
var MyModule = angular.module('MyModule');
Related
I am attempting to simply throw some JSON data onto a page from a GET call.
This is my HTML (Please be aware this is loaded into index.html which has the correct angular notation):
<h1>Downloads</h1>
<div class="container" ng-controller="DownloadCtrl as download">
<p>{{download.routes}}</p>
</div>
This is the download controller:
(function(){
'use strict';
angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl);
DownloadCtrl.$inject= ['DownloadService'];
function DownloadCtrl(DownloadService){
var self = this;
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData) {
self.routes = responseData;
});
};
};
})();
This is the download service:
(function(){
'use strict';
angular.module('dashboardApp')
.factory('DownloadService', DownloadService);
DownloadService.$inject = ['$http', '$sessionStorage'];
var baseURL = 'http://localhost:8080/Dashboard/rest/download/';
function DownloadService ($http, $sessionStorage){
var service = {};
service.getRoutes = getRoutes;
return service;
function getRoutes(){
return $http.get(baseURL+"route",$sessionStorage.sessionData.sessionID);
}
}
})();
I have debugged the application and it does hit self.routes however it just skips over it and no data is displayed.
I also am not receiving any errors in the console. It just skips over the function.
This is my first AngularJS application.
Your code is bad organized,
the error resides in the view, because it is not calling the method self.routes, it is just printing out...
your view must do something like that:
<p>{{download.routes()}}</p>
But, this is a bad way to code...
Please, consider doing something like that:
DownloadService
.getRoutes()
.then(function(responseData){
self.routes = responseData;
})
;
// instead of
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData){
self.routes = responseData;
});
};
I am trying to create a user profile page. Where User can display and edit their information.
This is my Controller.js
var userProfileControllers = angular.module("userProfileControllers", []);
userProfileControllers.controller ('userProfileCtrl', ['$scope', '$location', 'localCache', 'customersignup', function ($scope, $location, localCache, customersignup){
var submitProfile = function() {
//Bind Scope
//
var bindScope = function () {
$scope.userProfile = customersignup.userProfile;
};
var asyncBindScope = function() {
$scope.$evalAsync(bindScope());
};
bindScope ();
}}]);
This is my service.js
var userProfileServices = angular.module("userProfileServices", []);
userProfileServices.factory("customersignup", function() {
return {
userProfile: {fname: "kunal"},
updateProfile: function() {
var userProfile = this.userProfile;
},
}
});
In the HTML, let's say in case of first name I have included ng-model="userProfile.fname" in the input of First Name field. Now, when I am loading the html page, I am getting this error :-
https://docs.angularjs.org/error/$injector/unpr?p0=localCacheProvider%20%3C-%20localCache%20%3C-%20userProfileCtrl
Please check the above link, it is from AngularJS official site.
check you have two modules one is for service and other one is for controller, and note that there is no glue between these two modules, to work this you need to glue these two modules, to do that, import the service module in to controller module as below.
var userProfileControllers = angular.module("userProfileControllers", ['userProfileServices']);
then module userProfileControllers have access to module userProfileServices which service is defined. Other vice you don't have access to service module userProfileServices.
You have to add factory name in controller userProfileServices
I've created a simple logging service in Angular:
app.service('$userInteraction', [function() {
var userLog = "";
this.log = function (datetime, screen, logMessage) {
userLog.concat(datetime + "\t" + screen + " Screen\t" + logMessage + "\n");
}
this.getLog = function () {
return userLog;
}
this.clearLog = function () {
userLog = "";
}
}]);
And I use it in one of my controllers like so:
app.controller('myController', ['$scope', '$userInteraction', function($scope, $userInteraction) {
$userInteraction.log(Date(), 'Login', 'Some random message.');
}]);
But when I run my code I get the following error:
TypeError: $userInteraction.log is not a function
Though I could've sworn that it worked before. I'm fairly new to Angular so this might very well be a newbie mistake. Thanks in advance!
this question is old, but help someone... You code run on plunker, problably you have duplicate services name... Check all files angularjs and verify if exist another service with same name.
I had similar problem. Two services with same name and call did not have function called.
I'm going through some of the examples online for AngularJS to try to understand how it works. I'm trying to use jasmine to test like in the examples. In my spec file, I have:
var Person = function (name, $log) {
this.eat = function (food) {
$log.info(name + " is eating delicious " + food);
};
this.beHungry = function (reason) {
$log.warn(name + " hungry " + reason);
};
};
var bob = new Person();
describe("describe", function () {
it("$q", function () {
var pizzaOrderFulfillment = $q.defer();
var pizzaDelivered = pizzaOrderFulfillment.promise;
pizzaDelivered.then(bob.eat, bob.beHungry);
pizzaOrderFulfillment.resolve("resolved");
$rootScope.$digest();
expect($log.TypeInfo.logs).toContain(["resolved"]);
});
});
I get
ReferenceError: $q is not defined
Am I using Jasmine correctly? I basically am just writing all my angular and jasmine code in the spec.js file. When I had the angular code in another file, my spec.js file couldn't find it. Probably because I didn't set any dependencies up on what gets loaded first since I'm just starting out with this stuff.
Edit, fixed the $ to be $q and the referencerror.
I guess you are not injecting the $q service in your unit test.
For example in your beforeEach block you can inject it:
var q;
beforeEach(inject(function($q) {
q = $q;
}));
And then in your unit test:
describe("describe", function () {
it("$q", function () {
var pizzaOrderFulfillment = q.defer();
var pizzaDelivered = pizzaOrderFulfillment.promise;
pizzaDelivered.then(bob.eat, bob.beHungry);
pizzaOrderFulfillment.resolve("resolved");
$rootScope.$digest();
expect($log.TypeInfo.logs).toContain(["resolved"]);
});
});
var login_app = angular.module('login_app',[]);
login_app.factory('login_service', function($http) {
return {
login: function() {
//return the promise directly.
return $http.get('/service/login')
.then(function(result) {
//resolve the promise as the data
return result.data;
});
}
}
});
login_app.controller('login_controller',
['$scope',
function($scope,login_service){
$scope.login_username = "";
$scope.login_password = "";
$scope.remember_login = false;
$scope.login_button_action = function(){
login_service.login();
}
}]);
I have a login form which is under the scope of this controller and works fine.
whenever I press the login button, login_button_action is getting called via ng-click directive.
my problem is that I keep getting this error in my JavaScript console.
ReferenceError: login_service is not defined
Is there something wrong with the wya my controller is using the service ?
You need to add the login_service to the definitions above:
login_app.controller('login_controller', ['$scope','login_service',
function($scope,login_service){
// Your code using the service.
}]);
And of course...the service script file needs to be linked in the document.
To be complete...you do not have to do this at all if you are not considering minification or such. In that case it can just be
login_app.controller('login_controller', function($scope, login_service){
// Your code using the service.
}]);