When using C#, .Net, MVC5, AngularJS and the Select2 dropdown control, you'll find the dd at the top of the layout for users to select a project. The select2 control can be populated as explained in detail here.
To ensure global data accessibility, a Angular service was created with the following code snippet:
var app = angular.module('app', ['kendo.directives', 'ngResource', 'ngRoute', 'ngSanitize', 'ui.select2']);
app.factory('globalContainer', function () {
var globalContainer = {};
globalContainer.dashboardGlobals = {
userContext: Object(null),
currentProject: Object(null),
projectList: Object(null),
testString: "Global Test String!!!"
};
return globalContainer;
});
The values are then set in a controller as shown below:
app.controller('projectListController', ['$rootScope', '$scope', '$log', 'abstractDataFactory', 'customUIFunctions', 'globalContainer',
function ($rootScope, $scope, $log, abstractDataFactory, customUIFunctions, globalContainer) {
var vm = this;
vm.dashboardGlobals = globalContainer.dashboardGlobals;
...
vm.dashboardGlobals.projectList = result.value;
// make a restful call w/ data to set value on server side
However, an issue arises when loading a new page as the values reset. The question of how to maintain these values across pages without the use of a Single Page Application (SPA) is raised.
While considering making a background call to a server controller to populate user context information, the focus remains on finding an Angular-centric solution.
The main goal is to update a globally-accessible client-side object upon changing the DD selection, mirroring the functionality already available on the server side.
Given the current technological stack in place, any suggestions on the best approach would be greatly appreciated.
Please share your insights!