I am trying to use the angular-local-storage module (https://github.com/grevory/angular-local-storage), version 0.2.2 (according to bower) in a service within my application. I seem to be having issues with it when I call it within a service, but it works fine when I put it inside a controller.
I have it configured like this:
angular.module('myApp', [ 'LocalStorageModule' ])
.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('test')
.setStorageType('localStorage');
})...
And then in my service, I have it like this (simplified, for testing purposes):
angular.module('myApp')
.service('UserService', [ 'localStorageService',
function(localStorageService) {
return {
save: function() {
localStorageService.set('user', 'me');
}
};
}]);
This code yields an error of:
TypeError: localStorageService.set is not a function
On the other hand, if I place the exact same code into a controller (indeed, the controller who calls this service), everything works as expected. Does angular-local-storage not work within services?
Thanks in advance!
It does work for me with minor tweaks. See below code snippet.
angular.module('myApp', [ 'LocalStorageModule' ])
.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('test')
.setStorageType('localStorage');
})
.service('UserService', [ 'localStorageService',
function(localStorageService) {
return {
save: function() {
localStorageService.set('user', 'me');
}
};
}])
.controller('MainCtrl', function($scope, UserService){
$scope.test = function(){
console.debug('save called');
UserService.save();
};
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="MainCtrl">
<button ng-click="test()">Test</button>
</div>
<script type="text/ng-template" id="home.html">
Lorem ipsum
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
</body>
</html>
Related
My controller is not triggering. It should be stupid but I can't see why.
Here find my code structure.
Please help me find that basic error.
template :
<!DOCTYPE html>
<html ng-app="attachmentsApp" ng-cloak="">
<head>
<meta charset="utf-8"/>
<script th:inline="javascript">
/*<![CDATA[*/
var source = [[${source}]];
var appContext = /*[[#{/}]]*/ '';
/*]]>*/
</script>
</head>
<body>
<div th:replace="include"></div>
<script th:src="#{/app/modules/attachments/scripts/attachmentsapp.js}"></script>
<script th:src="#{/app/modules/attachments/scripts/controllers/AttachmentsHomeCtrl.js}"></script>
<script th:src="#{/app/modules/attachments/scripts/services/AttachmentsHomeService.js}"></script>
</body>
</html>
App :
angular
.module('attachmentsApp', ['ngRoute'
]).run(['$rootScope', function($rootScope){
$rootScope.appContext = window.appContext;
$rootScope.language = window.language;
$rootScope.source = window.source;
}])
.config(function($routeProvider) {
$routeProvider.when('/', { templateUrl: window.appContext + 'app/modules/attachments/views/home.html', controller: "AttachmentsHomeCtrl" })
});
Controller:
angular.module('attachmentsApp').controller('AttachmentsHomeCtrl', ['$scope','$rootScope','AttachmentsHomeService','$window',
function ($scope,$rootScope,AttachmentsHomeService,$window) {
console.log($rootScope.source);
debugger;
}]);
Service :
'use strict';
angular.module('attachmentsApp').service('AttachmentsService', [ '$http', '$rootScope', function($http, $rootScope){
this.getForm = function(type) {
debugger;
}
return this;
}]);
Many thanks
Suggesting some change in your HTML:
1) Define and load files before their use: ng-app was being used before attachmentsapp.js file is loaded in DOM
2) Order of usage: service file was loaded after its usage in controller
It should be look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script th:inline="javascript">
/*<![CDATA[*/
var source = [[${source}]];
var appContext = /*[[#{/}]]*/ '';
/*]]>*/
</script>
<script th:src="#{/app/modules/attachments/scripts/attachmentsapp.js}"></script>
<script th:src="#{/app/modules/attachments/scripts/services/AttachmentsHomeService.js}"></script>
<script th:src="#{/app/modules/attachments/scripts/controllers/AttachmentsHomeCtrl.js}"></script>
</head>
<body ng-app="attachmentsApp" ng-cloak="">
<div th:replace="include"></div>
</body>
</html>
Not 100% sure, but it should be working. Do a try !!
Moreover, keep an eye on console.
It was the Service name.
AttachmentsHomeService as registering it in Controller
AttachmentsService in service definition
Many thanks for your help
How to use window.onload function inside a controller.
window.onload= function() {
console.log("Hi Page loaded")
};
The controller is not applicable for the full page.
I want to execute a function after my controller loads at-least.
You can use ng-init and invoke your necessary function using the same directive
var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
$scope.load = function() {
alert("Window is loaded");
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="DemoApp" ng-controller="akuaController">
<div ng-init="load()">
</div>
</body>
</html>
Changing the example from Angular $window
Your Controller
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
// This would be a starting point
$window.onload(greeting);
};
}]);
Your markup
<div ng-controller="ExampleController" ng-init="ExampleController.doGreeting()">
</div>
//inside your controller
$scope.$on('$viewContentLoaded', function() {
// write here
// either methods or variables
});
I have a page as follows. The controller is not working. Can someone please suggest me whats wrong?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
<title>AnjularJs Hello World</title>
</head>
<body data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
<script src="Scripts/angular.js"></script>
<script>
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
</script>
</body>
</html>
Alert inside the controller is not popping. The first alert is popping. Also the div with id="Trial" is not printing the name.
What am I missing?
You never create your demoApp-module. With angular.module(name) you get an already created module, with angular.module(name, dependencies) you set(create) a module. So simply add:
angular.module('demoApp', []);
above the line with angular.module('demoApp') and your cord works just fine:
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp', []);
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp" data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
</body>
Suppose I have one route:
angular.module('LiveAPP', ['ui.router',
'LiveAPP.main',
'LiveAPP.artist',
'liveAPP.signup',
'LiveAPP.factory',
'liveAPP.review'
])
.config(function($urlRouterProvider, $stateProvider) {
$stateProvider.state("home", {
url:"/",
templateUrl : '/home.html',
controller : 'mainCtrl',
resolve: {
artists: function () {
console.log('resolved')
return "I want this in controller";
}
}
})
})
Prior to the instantiation of my mainCtrl I want the function bound to artists to be run. So in my controller I have the following setup:
angular.module('LiveAPP.main',['LiveAPP.factory'])
.controller('mainCtrl', ['$rootScope','$scope','$http', '$location','dataFactory','artists', mainCtrl])
function mainCtrl($rootScope,$scope,$http,$location,dataFactory,artists){
console.log(artists) //expect the return from resolve in ui.router
}
When console logging artists it is evaluated to undefined. Anyone have any idea why that is?
Were you using ui-view? If yes it should not have any ng-controller for mainCtrl. I have made minor tweaks and your code works fine
angular.module('LiveAPP', ['ui.router', 'LiveAPP.main'])
.config(function($urlRouterProvider, $stateProvider) {
$stateProvider.state("home", {
url:"/",
templateUrl : 'home.html',
controller : 'mainCtrl',
resolve: {
artists: function () {
console.log('resolved');
return "I want this in controller";
}
}
});
});
angular.module('LiveAPP.main',[])
.controller('mainCtrl', ['$rootScope','$scope','$http', '$location', 'artists', mainCtrl]);
function mainCtrl($rootScope,$scope,$http,$location, artists){
console.log(artists); //expect the return from resolve in ui.router
}
<!DOCTYPE html>
<html lang="en" ng-app="LiveAPP">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ui-view></div>
<script type="text/ng-template" id="home.html">
Lorem ipsum
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
I developed one RESTful web service. The link return json code, like these:
{"status":"itPassed","dest":"/elk2/kr659p/home"}
Now I want to display these data in my screen.
View:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-resource.min.js"></script>
<script src="../controllers/webservice.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.status}}</p>
<p>The content is {{greeting.dest}}</p>
</div>
</body>
</html>
My Controller
angular.module('myApp', []).controller('Hello', function ($scope, $http) {
alert(1);
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(2);
$scope.greeting = data;
alert(data);
});
});
no errors in console? because that's not really how you write a controller in angularJS.
you should have something like
angular.module('mymodule', []).controller('Hello', function ($scope, $http) {
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(data);
$scope.greeting = data;
alert(data);
});
});
by the way, does the alert actually show something?
Did you try to place breakpoints?
Open the Chrome Debugger - Place the following breakpoints:
on the $http.get line - see if you are reaching it.
on the alert(data) line - see if the data contain what you expected.