i have faced this question in an interview, i know how to share data between two controllers using service and also using root scope. Is there any way to do with in angular to pass data between two controllers without using service and root scope>
Any suggestions please.
AngularJs uses the Observer pattern which consists on sending and reading events.
There are many times when one part of the application changes, other parts needs to be updated. In AngularJS, if the $scope object updates, an event can be triggered to notify another component. The observer pattern incorporates just that - if an object is modified it broadcasts to dependent objects that a change has occurred.
In short:
$scope.$emit() OR $scope.$broadcast() depending on your position and what is your 'reader'
Then
$scope.$on()
The best practice states using a service, you could also use $rootScope by assigning object literal $rootScope.sharedVar. There's also a $broadcast method, which is an observer pattern, works like pub/sub.
The least recommended way would be leveraging your $parent scope and drilling down your element (depending where it's located in the DOM tree)
Related
I've been reading up a more in depth about angularjs directive and controller, what should be in one and the other. The situation is this, I have multiple people with their types -> policemen, medicine, lawyers ... etc. inside the admin panel app, where the admin can manage them. In one section the admin can create, edit, delete them. The current versions controller does almost all the work: UI (bringing up the right form, hiding the other forms...), and logic (deleting, creating, updating methods for each person type). As I understand this is not good, because the controller does multiple things (no single responsibility). And even further the controller should only bind values to scope.
But does that mean, that I should only pull all the people (inside controller) and pass it some master directive which will manage it all? Or should their be more directives inside directives to divide the responsibility?
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
Without code it's hard to give a precise answer, but the general idea when working with angular is this:
Controller: The controller is responsible for keeping the views up to date with all the changes that are happening throughout your app. This means that it should not contain the business logic, this logic should instead be separated into small services. Each handling different parts of the logic for your app.
Service: As stated above, a service should contain your business logic. Meaning that heavy calculations, manipulations etc. should be put into a service. Since services are singletons you can easily inject this service anywhere and re-use the logic within it, something you cannot do if you've put your logic inside a controller.
Directives: Like controllers, directives shouldn't have any business logic in them. Directives are only there to create re-useable functionality as well as giving you a place to handle direct DOM changes. DOM changes should never be done anywhere but from within a directive.
To answer this:
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
If you have the data bound to a controller, you should not necessarily need a directive to handle the CRUD operations. Since the data is bound to the controller, you can easily create a template which reacts to the data changes automatically using ng-repeat, ng-if and so on.
I have a number of sibling controllers and to the side of the screen I have some filters and options that generally can apply to any controller. My problem is that I want to preserve the state of the options for use from any of the controllers.
The way I understand this should be done from reading is to create a service which I can then inject into my controller and use the exposed getter/setter methods to access values.
However, from the AngularJS docs here the last paragraph, which advises against using $rootScope for this purpose, also notes Conversely, don't create a service whose only purpose in life is to store and return bits of data.
Is it bad practice to use a service as a singleton for passing data between controllers? What are the complications and tradeoffs and what are alternative approaches?
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.
What is the proper way to access a function side controller A from inside controller B?
The best method I've been able to find is to push the functions to a shared service, so I've started to move all of my functions and logic inside this service, which feels like the wrong way to do things.
My scenario is that I have a view utilizing two different controllers. Each one has its own set of tabs for navigation. I need to be able to navigate between views and to specific tabs inside.
Is a service really the best way to do this? Or have I missed something?
The best way to communicate between two controllers is by using the service. You have common method defined inside the service and then inject that service wherever you need that function to use.
Use $broadcast service to trigger the event and all.
Following is the plnkr which shows how to communicate between the controllers.
Plnkr :http://plnkr.co/edit/d98mOuVvFMr1YtgRr9hq?p=preview
I am trying to negotiate a conceptual issue in AngularJS.
I have a controller that is currently using multiple services. Among this services, a few are used as a singleton per view. This means that once I enter a certain view (actually state since I am using Ui-Router), these specific services, which have some dependencies among themselves, are singleton(s).
However, when exiting this view and going later going back should instantiate new instances of them (and again being singletons for this state).
There are a few possible solution I came out with, all of them are not great:
Manually force instantiating them every time entering this view.
Manually force deleting from cache every time exiting this view.
Using a controller rather then using service/factory/provider.
Creating my own "factory" type, which will be implementing the angular's injection without being a singleton.
I was wondering if angular can offer some sort of "type" (such as non-singleton factory), that can solve this issue.