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]
Related
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
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 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.
I am using angular-ui in my project and I wanted to implement a modal window. Most of the components of the library (http://angular-ui.github.io/bootstrap/) are implemented as directives (as expected). However, modal is not - it is implemented as a service. This leads to a strong dependency on the view in the controller (i.e. the controller needs to know that the view uses a modal window, what should not be the case).
My question is: why is modal implemented as a service, not directive? Does it give any benefits?
The $modal directive is quite flexible, and by its API, it supports:
Being triggered on any event you want, since the controller controls when it opens.
Passing data from the controller to the controller in the dialog, using the resolve option
Using any controller or template in the dialog.
Passing data back from the dialog on close to the triggering controller, by its result promise.
While not impossible for this to all be in a directive, I think it could only realistically be achieved by using a lot of options, or a complicated object, which would have to be constructed in the controller anyway.
Another reason for this not being a directive, is that directives are usually for things in a particular place in a page. The modal by its very design is not attached to any element in the page.
I would suggest trying to design an API for a directive that gives the same functionality as $modal, and I suspect it'll reveal that using a service is, on the whole, clearer, and probably more flexible.
I'm developing angular web app, I have this doubt that whether it's possible to separate UI from controller absolutely clean?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages.
So I'm thinking I have to call certain api of UI framework to notify the user either with a popup or some kind of toast. But doing that, doesn't it mean I'm embedding UI code into my controller logic? Isn't that the opposite of clean separation between UI and controller?
If I want to switch to another UI framework, that means I need to alter my controller code as well.
I'm a newbie of web app, hope someone can clarify my doubts.
What will you do?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages. So I'm thinking I have to call certain api of UI framework
You don't necessarily need to do this. In your UI, you can have HTML (UI code) that shows the user the problem. Using ng-if, this UI code is hidden from the user. If you controller detects a load failure, it can then set a value on the controller that will do the following
Cause the UI code to display
Optionally, set the display information in the UI code
<div ng-if="displayError">{{errorMsg}}</div>
Then, in your controller, something like this:
MyService.getData().then(
function(responseData) {
$scope.goodData = responseData;
},
function(failure) {
$scope.displayError = true;
$scope.errorMsg = "Failed to Retrieve Data"
}
);