JSFiddle - React, Tailwind, and code Playground
HTML
<div data-ng-controller="ViewCtrl">
<h1>My View</h1>
<ul>
<li data-ng-repeat="user in users">
<label data-ng-bind="user.Name"></label>
</li>
</ul>
<ul>
<li>
<label data-ng-bind="colours.Pink.HexValue"></label>
</li>
<li>
<label data-ng-bind="colours.Pinker.HexValue"></label>
</li>
<li>
<label data-ng-bind="colours.Pinkest.HexValue"></label>
</li>
</ul>
</div>
<div data-ng-controller="AccountCtrl">
<h1>Account View</h1>
<ul>
<li data-ng-repeat="user in users">
<label data-ng-bind="user.Name"></label>
</li>
</ul>
</div>
JavaScript
angular.module('myApp', [])
.controller('ViewCtrl', ['$scope', 'ViewServices', function ($scope, ViewServices) {
ViewServices.UserService.GetUsers(function (res) {
$scope.users = res.Users;
});
ViewServices.ColourService.GetColours(function (res) {
$scope.colours = res.Colours;
});
} ])
.controller('AccountCtrl', ['$scope', 'AccountServices', function ($scope, AccountServices) {
AccountServices.UserService.GetUsers(function (res) {
$scope.users = res.Users;
});
} ])
.service('UserService', function () {
return {
GetUsers: function (callback) {
// mock database call
var userData = {
Users: [
{ UserId: 1234, Name: 'Tommy Smith' },
{ UserId: 1235, Name: 'Austin Davies' },
{ UserId: 1236, Name: 'Barack Test' }
],
PageSize: 3,
PageNo: 1
};
callback(userData);
}
};
})
.service('ColourService', function () {
return {
GetColours: function (callback) {
// mock database call
var colourData = {
Colours: {
Pink: { HexValue: 'FF00DD' },
Pinker: { HexValue: 'FF47E7' },
Pinkest: { HexValue: 'FF70EC' }
},
PageSize: 3,
PageNo: 5
};
callback(colourData);
}
};
})
.service('ViewServices', ['UserService', 'ColourService', function (UserService, ColourService) {
return {
UserService: UserService,
ColourService: ColourService
};
} ])
.service('AccountServices', ['UserService', function (UserService) {
return {
UserService: UserService
};
} ]);