JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<div ng-controller="AppCtrl">
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>
</div>
JavaScript
/**
* ------- CLASS DEFINITION -------
* this block of code is for class definitions. Each namespace could be in
* separate directory and each class in separate file.
*/
/**
* Controller class definition
*/
my = window.my || {};
my.controller = my.controller || {};
my.controller.ItemCtrl = function ($scope, loader) {
$scope.items = loader.loadAllItems();
};
my.controller.CachedCtrl = function ($scope) {
$scope.items = [{
name: 'Cached ctrl value 1'
}, {
name: 'Cached ctrl value 2'
}]
}
/**
* Model class definition
*/
my.model = my.model || {};
my.model.DataLoader = function (notifier) {
this.notifier = notifier;
this.loadAllItems = function () {
this.notifier.messageMe('Loading items');
// let's asume there is ajax call and promise object return
return [{
name: 'Item1'
}, {
name: 'Item2'
}];
};
};
/**
* Some debug classes definition
*/
my.debug = my.debug || {}
my.debug.LogNotifier = function ($window) {
this.$window = $window;
this.messageMe = function (message) {
this.$window.console.log(message);
}
};
my.debug.AlertNotifier = function ($window) {
this.$window = $window;
this.messageMe = function (message) {
this.$window.alert(message);
}
}
/**
* ------- DI CONFIGURATION -------
* Says which module uses which class as service ID
* There is no business logic just configuration
*/
/**
* app module configuration
*/
angular.module('app', ['debug'], function ($provide) {
var dataLoaderFactory = function (Notifier) {
return new my.model.DataLoader(Notifier);
}
// if you want to change notifier just change this injection to AlertNotifier
dataLoaderFactory.$inject = ['LogNotifier'];
// Specify factory with service ID DataLoader for class my.model.DataLoader
$provide.factory('DataLoader', dataLoaderFactory);
})
.controller('AppCtrl', my.controller.ItemCtrl); // you...