Alex Taylor
Managing application state is hard
src/
|- app/
| |- home/
| |- about/
| |- contact/
| |
| |- directives/
| |- services/
| |- filters/
| |- app.js
Services are objects you can use to organize and share code across your app.
and so on...
src/
|- app/
| |- actions/
| |- components/
| |- dispatcher/
| |- stores/
| |- utils/
| |- app.js
services
if (!$scope.$$phase) $scope.$apply()
Flux is simply a pattern that you can incorporate on your own - author of ng-flux
angular.module('shf.alt', [])
.factory('alt', function alt() {
return new window.Alt();
});
angular.module('shf.actions.chat-thread', [])
.factory('chatThreadActions', function chatThreadActionsFactory(alt) {
function ChatThreadActions() {
this.generateActions('clickThread');
}
return alt.createActions(ChatThreadActions);
});
angular.module('shf.stores.message', [])
.factory('messageStore', function messageStoreFactory(alt, chatMessageActions) {
function MessageStore() {
this.bindActions(chatMessageActions);
this.messages = {};
}
MessageStore.prototype = {
constructor: MessageStore,
onCreateMessage: function(text) {},
};
MessageStore.get = function(id) {};
MessageStore.getAll = function() {};
return alt.createStore(MessageStore, 'MessageStore');
});
angular.module('shf.utils.chat-message', [])
.factory('chatMessageUtils', function chatMessageUtils() {
var util = {
convertRawMessage: convertRawMessage
};
function convertRawMessage(rawMessage, currentThreadID) {
return {
id: rawMessage.id,
authorName: rawMessage.authorName,
date: new Date(rawMessage.timestamp),
text: rawMessage.text,
};
}
return util;
});
.controller('MessageSectionCtrl', function(messageStore, threadStore) {
var ctrl = this;
init();
function init() {
messageStore.listen(getStateFromStores);
threadStore.listen(getStateFromStores);
getStateFromStores();
}
function getStateFromStores() {
ctrl.messages = messageStore.getAllForCurrentThread();
ctrl.thread = threadStore.getCurrent();
}
});
.directive('messageListItem', function() {
return {
bindToController: true,
controller: 'MessageListItemCtrl as ctrl',
scope: {
getMessage: '&message'
},
templateUrl: 'message-list-item.tpl.html'
};
})
.controller('MessageListItemCtrl', function(chatMessageActions) {
this.text = '';
this.markAsRead = function(text) {
chatMessageActions.markAsRead(ctrl.getMessage().id);
};
});
<input type="text" ng-model="ctrl.message" />
<input type="text" valueLink={ this.state.message } />