angularjs service calling $location.path is it against best practices? - javascript

I am using a service in angularJS where I call $location.path inside one method in order to make a route change after a success or failure response from another service internally. Is this against Angular's best practices?

Based on inputs given by other members, calling $location.path inside a service is against Angular's best practices instead it should be called in a controller.

Related

Is there a way to pass a flag to the service call inorder to filter out in angular interceptor file(other than passing it as a param in request)?

I need to pass a flag to the service request call in order to filter out and do some actions for the request in the angular interceptor file.
Is there any angular specific methods available to implement this functionality, other than modifying the request with flag as query-param or body param.
FYI: -Angular version 8
You can use a service to hold the updated flag,and inject that service to the interceptor and then do whatever you need to do with the request nor the data that is being sent

Are controllers always awake?

I guess awake isn't the right word. Say I have a multi-page, large AngularJs application. Is the controller of a page that isn't active right now awake? For example, if I wanted to call a function of that controller with $rootScope.$broadcast, would it be listening for that signal or would it only recieve that signal when I go to the part of the page that requires that controller? Sorry if this makes not much sense.
Controllers have instances per usage, that means that angularJS will make an instance of some controller only if it is in use.
If you need to pass data from one controller to other, the common way is to use some service. As service are singletons which created on the first inject.
So, you can inject a service in one controller (page), invoke some method on it, which will change some data on it, then navigate to other page, in this page, inject the service, and use the data on it.

Angular - async updates & rendering from service to controller

I have a Service that listens to webSockets (can't use callbacks or promises, data updates are random). service gets updates and saves them to service's object. I Have an angular-app page with controller that has the service object in the $scope.
But I got a problem in rendering data on the page. Right now I am using $timeout() to update the view but looking for a more elegant way.
I understand that I can use $watch on the service's object, but I think that it is too heavy for browser.
So what is the right way to render the view/controller after changes in service's data?
You can use $rootScope.$broadcast as an alternative but it's also as heavy as $watch, I don't know why you are afraid of using $watch, the cost in performance is not that big !!
To use $broadcast add this line of code to your service :
$rootScope.$broadcast('WatchedData', data);
And in your controller do something like the following :
$scope.$on('WatchedData', function(event) { return stuff });
to read more about $rootscope.$broadcast check this SO answer
i suggest you to use resolve , it will load data before controller and View is instantianting in your routing file , and inject your Service into function
You can watch this Demo PLunker Demo

can I pass data when routing in angular

I want to pass a lot of data (json) when routing to a new controller in angular.
In controller A I call $location.path('/B'); which in turn will route to controller B.
I know I can pass parameter in the url itself, but I have a lot of data.
Can angular do something similar to 'POST' method and pass data in this way?
No need to bother with POST like behavior with angular.
You have several ways to do this :
use a service that will preserve data across page loads
pass real GET argument (when the page is specifically linked to this argument, for example an object ID used to display this object details)
store data in local storage / session storage
use controller 'resolve' functionnality to fetch new data before displaying page (not what you want to do though...)
Remember you're not actually changing the page, so you don't need to 'POST' data anywhere or do anything similar.
Instead you should create a service that makes that data available through dependency injection, then specify the dependency when you instantiate the controller that handles the new route.

Angular service using $watch to do $http call when a property is changed

I'm pretty new to Angular and wondering what the best way to handle this is. My app is structured with a service that keeps track of the app state and currently loaded data. I inject this into all my controllers so the app state will be shared with them and can also be changed between controllers by using the service. The service is outlined a bit like this:
app.factory('AppStateService', function() {
return {
selected_section: "blog",
data_of_selected_section: {here_comes_data_from_an_api}
}
}
As said, I inject this in all my controllers and bind them to the controller scope, so they can all change those properties and this works perfectly. However, I'd really like the service to automatically do an $http call to an API, whenever some of the properties change. When the data comes back from the API, I want this data assigned to a property so the controllers can update based on this data.
In the above example for instance, if a controller changes selected_section from e.g. "blog" to "main", I want the service to do the $http call and put the returned data in data_of_selected_section to let it propagate to the controllers. I could of course do this directly from the controller and push the result to the service from there, but then I'd have to replicate that code in each controller. Thus, I'd rather want the service to do it by itself.
What is the best way to do this? I guess I'll have to build in a $watch or $watchCollection somewhere in the service but I have a hard time wrapping my head around exactly how to do so. Especially since I could easily imagine that doing it the wrong way could kill performance.
On a side note, the reason I want to do it this way is because I'm doing data visualization and thus it is mostly my interface and not my data that will change. Thus, I'd really like to store my data and app state "globally" in a service. I don't know if it makes sense. Any help would be greatly appreciated!
You could use .run as this method will instantiate the service on every route change.
app.run(function ($rootScope, AppStateService) {
$rootScope.$on('$routeChangeStart', function () {
$rootScope.data = AppStateService.data_of_selected_section
});
});
You can write your http call inside the service as it will be automatically called whenever there is a change in the route

Categories

Resources