Switching from a jquery mindset to Angular can be challenging for beginners. After reading various tutorials and guides, I am attempting to enhance my skills by developing a customizable dashboard application.
Here is the HTML I have so far:
<div class="library">
<div class="dropdown" ng-controller="LibraryCtrl">
<div id="lib-{{widget.WidgetID}}" ng-repeat="widget in widgets">
<div data-toggle="tooltip" title="{{widget.WidgetDesc}}">
<h2>
{{widget.WidgetName}}</h2>
<div class="libraryWidget {{widget.WidgetReportType}}">
</div>
</div>
</div>
</div>
</div>
<div class="dashboard" ng-controller="DashboardCtrl">
<div>
<article>
<div id="dash-{{widget.WidgetID}}" class="jarviswidget" ng-repeat="widget in widgets">
<header role="heading">
<h2>
{{widget.WidgetName}}</h2>
</header>
<div role="content" class="content">
<div class="inner-spacer">
<div class="table">
</div>
</div>
</div>
</div>
</article>
</div>
</div>
I am currently working on two views - one for the library of available widgets and another for the widgets selected for the dashboard. The library view works fine, but I'm having issues with the dashboard view.
Below is the JavaScript code:
function LibraryCtrl($scope, $http, sharedModels) {
$http({
method: 'POST',
url: '../Services/GetUserWidgetDetails',
headers: {
'Content-type': 'application/json'
}
}).success(function (data) {
sharedModels.setProperty(data);
$scope.widgets = data;
console.log(data); // showing expected data
});
}
function DashboardCtrl($scope, sharedModels) {
var libraryWidgets = sharedModels.getProperty();
$scope.widgets = libraryWidgets;
console.log(libraryWidgets); // displaying empty object initially
}
angular.module('dashboard', [])
.service('sharedModels', function () {
var libraryModel = {};
return {
getProperty: function () {
return libraryModel;
},
setProperty: function (data) {
libraryModel = data;
}
};
});
Both controllers are supposed to utilize the same model. However, the issue lies in DashboardCtrl rendering its view before LibraryCtrl's success function is completed. What would be the best way in Angular to resolve this problem?
Additionally, if the div.content element in my div.dashboard view needs to display one of multiple sub-templates based on the JSON received from LibraryCtrl, how should I approach this? Unlike jquery templating where I could use IDs for each template, I'm unsure about selecting a template and rendering it within another template in Angular. Any pointers on how to achieve this would be appreciated!