I believe that the best way to communicate between controllers is to use a service to store a message.
I am currently building a master-detail application and would like to use a service to store the list item that has been clicked in the master so that I know which element to fetch in the detail.
So as I understand it the chain of events should be like this:
User clicks on button in the master view.
Service updates local variable with the button that was clicked. The service then uses $broadcast to broadcast to the detail that the variable was changed.
Detail has a $on that then reacts to the button being clicked.
Does this flow make sense?
And can someone point me to a tutorial on how to implement this in typescript?
Thanks
Related
I'm not sure if the title for my question is correct, but basically what I'm trying to do is this:
I need to make a modal that contains a form. It should take in a customer id and fetch data from the server and render it in the form. This same modal can be opened from several different pages and multiple times on each page with different customer ids.
I'm using DevExpress Web so bootstrap and $uimodal and $uibmodal are not options here.
My challenge is that I dont know how to create the modal in a way that it has its own view and controller, and still be able to use it in another controller and call a method to open it or pass it a customer id to fetch from the server.
Can anyone help me figure this out?
The best I've been able to do is to bind a modal to it and watch for when it changes, but not making a method that can be called from the parent controller, but it just doesn't feel right.
Thank you in advance
Sina
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
I was wondering what is the preferred way to make different part of an app interact with each other.
For instance let's say we have a directive A that display a product in the shopping basket of a user. This directive has access to a persistence service that allows CRUD operations on the item.
Let's also say we have a directive B that displays a general message.
Now the user decides to delete a product from his basket. Is it acceptable to make it publish an event this way?:
$scope.$emit("item-deleted");
and then have B listening on that type of event:
$scope.$on("data-received", function(event, next, current) {
// show up and tell "item deleted succesfully"
});
Is it a good way to achieve the result? It definitely is in other frameworks and in UI development in general. I was just wondring if it is a viable way in angular.
Thanks
You should use services instead of events propagation. With the dependency injection, it is really easy to use. It is the best way to make two controllers to talk to each other.
More on services : https://docs.angularjs.org/guide/services
create a service for directive B which will provide data for general messages.
inject that service into the underlying service of directive A. then call that service with proper message.
Directive A should auto display this data, because of 2 way data binding of angularjs.
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
I'm searching for a way to update the contents of a message visible from a modal from another controller. The purpose of this is to have a popup appear once a form is submitted indicating the the form is saving, and once an http request is completed, have the popup indicate that saving is completed.
Are there any recommendations as to what type of architecture I can use to enable such a system?
The basic way for making communication between controllers is to create a service or a factory shared by both controllers.
For this method google "Communication between controllers", everything is explained.
Here is a fiddle wrote by somebody:
[http://jsfiddle.net/simpulton/XqDxG/][1]