Call controller from another controller - angularjs

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

Related

communicate between controllers in AngularJS typescript

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

angular2: service with a template?

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.

Using angular-ui-router, how to prevent controller from reloading?

I don't know if prevent the controller from reloading is exactly what I need.
I have the following scenario:
A view called client.list.html and it's controller ClientListController (list clients).
A view called client.html and it's controller ClientController (create and edit client)
On the client list, there's a button to edit the clients and some pagination.
What I want to do is:
When the user clicks to edit the client and go back to the list, the information (like selected client, current page and results) should be there still. But the controller gets reloaded and everything is lost.
As of my understanding you want to let the data binded to the view still there, correct me if this is wrong.
I had a similar problem where I had to keep the certain data on the view once loaded even if the view is reloaded. In this case you can bind the data to the view through $rootscope. There is only one $rootscope for the application and will not reload even if the view is reloaded.

Share data between controllers AngularJS

In our case, we have a search function in our application which shows the search results after entering a search term. The search results are products in our case. When we click on one of these products we are send to the page with information regarding this product. Now our problem, when we want to go back to the search page we want a method to return to the exact same page as before we left the search page. And not an entirely new search page.
We have divided our HTML in 3 views, which we load with the UIRouter.
We need to share data between the header, content and footer. When we show our search results, we want to show the amount of results in the header for example.
In short; we need to share our data between controllers / views. What will be the best solution?
We have thought about:
Adding a mainController to the body and using this as a medium to communicate data between controllers..
Store all data in a factory and access this factory direct from all controllers. But will all views be updated directly on data change? (2 way binding?)
However, we didn't get it working yet. What would be the best way to manage this?
As mertins mentioned in his comment, a service would do fine for this purpose.
Inject that service to all relevant controllers and indeed, thanks to 2-way binding all relevant data will be updated properly.
Don't use a controller, that's not what they are meant for!
If you need a code example for the service injection comment and I'll update this answer.

General approach of left side menu that loads different content in a center of the page

I've started to learn AngularJS but I need some application design hints. Of course I'm not asking about the layout but ... how to design my application and it's controllers in a proper way. I have left sidebar with a menu that is loaded from the web using JSON. That needs a controller. That's fine. It works for me. There's a content box as well in a center of my page that loads some data dynamically. In my opinion it requires another controller.
And now comes my solution, that somehow doesn't look good IMHO. When I click a menu item in my sidebar I'm loading a content. Then I'm passing this data into a Service which emits an Event afterwards to the Second controller (which is responsible for controlling my content in a center of my page). When it receives this event it simply gets previously loaded data from the Service and displays it. It generally works.... but ... I'm pretty sure that's not the proper way of doing this.
I would be grateful for any hints. AngularJS has a really poor documentation and tutorial :(
cheers
EDIT:
OK. That's my basic application using JQuery:
http://greatanubis-motoscore.rhcloud.com/index
And that's the same application I'm converting into AngularJS:
http://greatanubis-motoscore.rhcloud.com/angular/index
No worries, some text is in Polish but... I think it really doesn't matter ;)
Note for the AngularJS version: At the moment the content is a HTML but finally it will load JSON data as the other controllers.
I would go about doing this with angular ui-router. With ui-router you can achieve this in a couple of ways. You can use nested routing to have a base state (Your sidebar menu, header etc.) which will act as your shell page, this can have its own controller as well. You could then define each of those other views as child states of the base state. These child states can also have their own controller/views as well, but they will be sitting inside the base state (both visually, and also inherit $scope properties of the base state) optionally they can have separated URLs themselves, but they don't have to, you can just change states without changing the url, by leaving the URL bit empty when you define different states in your $stateProvider configs. Another way would be to use the multiple named views feature.

Resources