I'm building an application using Marionette, I'm trying to write come with an idea/pattern for handling notification on the application.
What I mean is when the user does some action we should show some notification(success/error), if an error occurs in the application we should show some notification.
I was wandering what is the best way/approach in handling some cases.
If you have some experience/link or any information will be helpful.
You should use events. You can see an example here:
https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_view.js : a view triggers an event (e.g. delete a model)
https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js : the controller listen for and processes that event. The same concept should be used for success/failure/error management.
There's an example of using events to manage routing in the free sample to my book on Marionette.
Related
I have a search controller, where the user can search for a single area.
After an area is searched, I $rootScope.$broadcast that the area has changed.
I have various other controllers that are responsible for independently loading and showing data about that area. They use $rootScope.$on, and get extra information from other sources using $http.
Is my approach the normal way of doing things? It feels unusual, since $broadcast wasn't mentioned in the tutorials I have been through.
I am trying to learn angular.
$emit/$broadcast are used a lot in angular libraries and even 3rd parties.
For instance you have events when navigating using the ng-route module, $routeChangeStart, $routeChangeSuccess, ... same goes for the 3rd party ui-router : $stateChangeStart, $stateChangeSuccess,....
It's just an event bus : listening and sending events in order to communicate with external components.
In angularJS, you will find them in the event part of the documentation.
However you should be carefull with events, too many of them can lead to lost control of what you're code is doing or be able to tell what should be the current state of your app.
It's possible for some that a cleaner way of doing it is tostore data in $rootScope/a service an use $watch on them.
EDIT : i didn't mention it but storing data in $rootScope is not advised for design/reusability.isoltion purpose.
Getting started with Angular, I am trying to implement a toolbar.
The application is structured in a menu bar, a view and the toolbar that form the web-page.
This toolbar has a general purpose (provides help functionality and error display), but for specific views adds some buttons that control the functionality (save, cancel, edit, delete, etc).
In the current design the view and the toolbar are siblings. The view controller depends on the data the view contains, and it can have different functionality. (For example: A view might allow data import, so there will be an import function in the toolbar, while other view might not.)
My problem is I cannot picture the structure of the communication between the view and the toolbar. Because the controllers are tightly coupled a service does not seem to address the communication.
Any help?
You can:
Share data between different controllers/services using rootScope
(use wisely)
You can Publish and Subscribe for app events using
$on, $broadcast and $emit
One good strategy which I have used and helped is to keep all App events definition in one service called something like AppEvents so you can easily keep track of them and control what event causes what from a single place.
Here is one nice article to read that expands more on this topic
Im trying to share data between 2 views. I need to use the 2 views at the same time on two different machines. One is controlling the other(ex: a counter) 1st view has next(+1) and the other just displays the result. I want the data to synchronized/binded. I do not want to have to refresh the 2nd page or to have to pull data with a timer or otherwise.
My idea was to use ng-view and routeProvider, I know that when the view changes the scope is cleared so I tried to use a parent controller/scope, the data is shared but I have to refresh the page on my 2nd view. I tried a service, same thing. I tried to $watch the result of the service but on the second controller/view no event is picked up so the view doesn't update.
what is the way to go? I was thinking about broadcasting or emit a custom event and trying to catch it, will that work? Am I just not binding to the service correctly? Would ui-router work better? I feel there should be an easy way to do this.... Im not seeing it! Please help if you can.
One of the simplest (in my opinion) implementations of client-client communication is using WebSockets. While that does have compatibility limitations (some browsers), that can easily be overcome by using a library like socket.io. Also, it's easy to write an Angular wrapper/service over socket.io that can be shared across components of your app, or even different modules.
It's also pretty simple to write a Node backend with socket.io
This might be a good read.
I would suggest you to focus on pushing stream rather than sharing it. Some how you need to push stream to second view which is changes in first view.
You may want to check this
Is there some way to PUSH data from web server to browser?
I have a web application with require.js, backbone.js and jquery.
The brief structure of the app is as follows:
There are 2 sections on the screen (toolbar and main content below).
There are multiple components (address management, event management), each triggered by a hash fragment change and require a
page transition.
There is one backbone.js router. It's the heart of the application. The router is activated with a new hash fragment (manually entered,
back button, menu item selection).
Up until now, in the router, I made the page transition, I DIRECTLY called the controller ("view" in backbone) of the selected component.
So there's a CENTRAL handling of controller calling.
But this has to change now to a DISTRIBUTED handling. I now need to respond to a new hash fragment from two different places: From the toolbar component and from router.
So my idea is to exchange the direct controller calling mechanism with pub sub. Now MULTIPLE components could register for a special action and the router just "fires the event".
I searched around and found Chaplin (https://github.com/moviepilot/chaplin), a backbone.js example application.
The developers of Chaplin seem to have a similiar thing called "ApplicationView" (https://github.com/moviepilot/chaplin#toc-router-and-route):
"Between the router and the controllers, there’s the ApplicationView as
a dispatcher."
Is there anyone who has already this kind of architecture and can tell me his experience with this or has anybody solved this in another way?
I've used a similar, though maybe less complex, architecture in this project. I give a pretty good explanation in this answer to a related question. The quick overview:
I manage app-wide events that change the application state using a singleton State model that works similarly to Chaplin's pub/sub architecture. This is just a basic Backbone model, with some added methods to deal with serializing and deserializing attributes as strings, so they can be set in the URL.
Application components that change the application state in response to user interaction or other input do so by setting properties on app.state.
Components that need to update when the application state changes do so by binding to change events on app.state (it looks like this is exactly the way Chaplin's mediator works, though they renamed the methods to fit the pub/sub paradigm).
I treat my routers like specialized views that update the address bar and respond to user input in that area. Changing the address (manually or by clicking on a link) causes the router to set() the necessary changes on the app.state model, and everything else updates accordingly.
I hope that's helpful - I think it's a little simpler than the Chaplin approach.
I have a wpf composite application with 3 or 4 modules that will always be loaded. In my shell I have a toolbar with buttons to active corresponding views from these modules. I injected an IEventAggregator into the shell presentor so that when a button is pressed I can publish an event that the corresponding module controller has subscribed to. When the event is caught the controllor will active its view.
Thats the theory anyways, in practice my controller is not catching the event. There are no errors in publishing or subscribing. I thought at first that there might be an issue with the eventAggregator not being the same, but thats not the case, and the event has a subscriber when its published.
Can anyone think of a reason why the event is not getting caught?
(Or any suggestions on a different way to get my view to show would be helpful too!)
Do you have your module controller 'alive'? Are you subscribing to the event using weak delegate reference or strong reference?
Seems that what is happening is that your module controller is being disposed, and so, the event is not getting caught.
To subscribe with a strong reference, use the keepSubscriberReferenceAlive option on the Subscribe method.
You can check the Event Aggregator article from the documentation which might provide more insight.
If that still does not works, can you share your repro code with me so I can take a look to it? (ezequieljadib at hotmail dot com)
Thanks,
Ezequiel Jadib