Call Angularjs module once

Question

I'm new to AngularJS and have seemingly a simple task. I want to reuse the AngluarJS LocalStorageModule on an empty page (no UI, execute once and redirect).

Here's how my attempt looks like:

<html>
<head>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script>
	var myApp = angular.module('myApp', [ 'LocalStorageModule' ])
	.factory(
			function(localStorageService) {
				
				localStorageService.set('username', 'some-user');
				localStorageService.set('token', 'somevalue'));
				window.location = location.protocol + '//' + location.hostname
						+ (location.port ? ':' + location.port : '');
			});
</script>
</head>
<body ng-app="myApp">You are being redirected
</body>
</html>

Unfortunately, the factory function is not being called. If I replace factory with the config the function is getting called but the localStorageServiceProvider doesn't expose set() method that I need.

The purpose of my exercise is to store value in the local browser storage for the real AngularJS application where the browser gets redirected to right after the above code gets executed, so that it can read and use the stored value.

I can't say that I understand your question properly but if I am you firstly need the normal .config() so the module injector can inject the LocalStorageModule. Afterwards you can use .run() to run the code that you need to run once. Also, use $location for redirection and such. Remember to inject $location and LocalStorageFactory into the .run() function call. The .factory() function is used to create your own factories, not to reuse the existing modules/factories. — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 9, 2016 at 23:19
@AleksandarBencun I don't get localStorageModule injected into the .config(). I get localStorageModuleProvider instead. That's different things I guess. Why $location is preferrable vs. my approach? This is not a real AngularJS app if you notice, I'm just trying to reuse an AngularJS module. Thanks for the hint with .run(), will take a look. — Sergey Shcherbakov
– Sergey Shcherbakov, Commented Jun 9, 2016 at 23:24
Well, the documentation clearly states that you need to use var myApp = angular.module('myApp', ['LocalStorageModule']); for initial module injection. Afterwards you need to use localStorageServiceProvider when injecting the module inside functions, e.g. .run(function(localStorageServiceProvider){/*code*/}); — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 9, 2016 at 23:27
Ok, but localStorageServiceProvider doesn't allow storing values, i.e. it doesn't expose set() method. Is the .run() approach irrelevant then? — Sergey Shcherbakov
– Sergey Shcherbakov, Commented Jun 9, 2016 at 23:29
If it's not exposing it then yes, it is irrelevant. You can try creating a JSFiddle so we can take a better look at your issue. — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 9, 2016 at 23:33

Aleksandar Bencun · Accepted Answer · 2016-06-09 23:37:21Z

1

You need to inject the module, configure it, and use it afterwards.

//load and config the modules
var myApp = angular.module('myApp', [ 'LocalStorageModule' ]);
myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('samePrefixAsTheTargetApp');
});
//this function is called only once
myApp.run(function(localStorageService){
  localStorageService.set('username', 'some-user');
  localStorageService.set('token', 'somevalue'));
  window.location = location.protocol + '//' + location.hostname
                    + (location.port ? ':' + location.port : '');
})

edited Jun 9, 2016 at 23:37

answered Jun 9, 2016 at 23:32

Aleksandar Bencun

3574 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Don · Accepted Answer · 2016-06-09 23:19:56Z

0

What you would want to do is use ngStorage module and its factories $localStorage and $sessionStorage to save data locally on browser.

Then before redirecting save value:

$sessionStorage.someVal ="blah"

and after redirect, read it:

$scope.val = $sessionStorage.someVal

edited Jun 9, 2016 at 23:19

answered Jun 9, 2016 at 23:15

Don

1,3341 gold badge10 silver badges19 bronze badges

8 Comments

Sergey Shcherbakov Over a year ago

My main application is using the LocalStorageModule. That's the reason why I'm trying use it, it's to provide maximum compliance. Are you saying that the ngStorage module is 100% compatible with the LocalStorageModule? (I can't touch the main application)

Don Over a year ago

as per docs "If localStorage is not supported, the library will default to cookies instead. This behavior can be disabled." Have u checked if any cookies are getting set with names ?

Aleksandar Bencun Over a year ago

I don't think he's using the ngStorage. This a different library linked in the OP.

Sergey Shcherbakov Over a year ago

Exactly, I want to store values with the same library/module that will read them a millisecond later after redirect.

Don Over a year ago

One other fail safe alternative is use $cookies provided by angular

|

Collectives™ on Stack Overflow

Call Angularjs module once

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related