Say I have angularjs modules called core, customer, and admin. Both customer and admin include core. I want both modules' sites to use the same header, which has a controller (HeaderController). When a user logs in to the site backed by the customer module, I create a constant with the user information on the core module. Wherever I go within the customer module, that constant has the data I put there. There's a link to go to the site backed the admin module and I want to be able to access that constant with the user info from admin (on the HeaderController). Below you'll find snippets of my code. Right now everything on customer works but when I go to admin I get the following:
Error: [$injector:unpr] Unknown provider: currentUserProvider <- currentUser <- HeaderController
Index.cshtml for customer
@{
ViewBag.Title = "Customer";
Layout = "~/Areas/Institutional/Views/Customer/_SiteLayout.cshtml";
}
<br />
<div>
<ng-view></ng-view>
</div>
@section Scripts {
<script type="text/javascript">
angular.module('core').constant('currentUser', @Html.Raw(Json.Encode(Model.Data)));
</script>
}
Module for admin
(function () {
'use strict';
angular
.module('admin',
['core']);
})();
Module for customer
(function () {
'use strict';
angular
.module('customer',
['core']);
})();
Controller where I need to access currentUser (constant)
(function() {
angular
.module('core')
.controller('HeaderController', ['$scope', '$rootScope','currentUser',
function ($scope, $rootScope, currentUser) {
$scope.currentUser = currentUser;
}
]);
})();
Each site has its own core module, and you have only defined the constant in the customer site page, not on the admin site page, so the constant is not available there.
Even if it was, every time you load an HTML page, everything stored in memory by the previous page goes away. So there's no way for code in one site to share in-memory constants with another site. Even if you stay on the customer site but refresh the page, you'll lose the previous value of the constant: the angular application will start from scratch.
In addition to @JB-Nizet's answer, you will have to persist the data in a different way, such as local Storage, session Storage or cookies. Whatever best fits your scenario
From what I can see, it looks like you're embedding a SPA into a .NET project. If you use asp.net mvc routing with angular a side effect is whenever the framework loads a view, your template reloads and so does our ng-app, thus you loose all the data on your app like you would with a page refresh as JBNizet mentioned.
The solution I can think of is using something like localStorage or a caching services to keep the data you need in "memory".