You are missing $scope.$apply(). Whenever you touch anything from outside of the Angular world, you need to call $apply, to notify Angular. That might be from: xhr callback (handled by $http service) setTimeout callback (handled by $defer service) DOM Event callback (handled by directives) In your case, do something like this: // inject $rootScope and … Read more
The bottom line is: You CANNOT inject a service into the provider configuration section. You CAN inject a service into the section which initializes the provider’s service. Details: Angular framework has a 2 phase initialization process: PHASE 1: Config During the config phase all of the providers are initialized and all of the config sections … Read more
To let the controller know when something async happens, use Angular promises. To provoke the $apply, you don’t need the scope, you can call $rootScope.$apply, as there is no difference calling it in a specific scope or in the root. Regarding the variable reading, it would be better if you received parameters. But you could … Read more
OnDestroy lifecycle hook is available in providers. According to the docs: Lifecycle hook that is called when a directive, pipe or service is destroyed. Here’s an example: @Injectable() class Service implements OnDestroy { ngOnDestroy() { console.log(‘Service destroy’) } } @Component({ selector: ‘foo’, template: `foo`, providers: [Service] }) export class Foo implements OnDestroy { constructor(service: Service) … Read more
Those are all examples of services that aid in AngularJS view rendering (although $parse and $interpolate could be used outside of this domain). To illustrate what is the role of each service let’s take example of this piece of HTML: var imgHtml=”<img ng-src=”https://stackoverflow.com/path/{{name}}.{{extension}}”>” and values on the scope: $scope.name=”image”; $scope.extension = ‘jpg’; Given this markup … Read more
A quick tip that helps me remember what they do – HostBinding(‘value’) myValue; is exactly the same as [value]=”myValue” And HostListener(‘click’) myClick(){ } is exactly the same as (click)=”myClick()” HostBinding and HostListener are written in directives and the other ones (…) and [..] are written inside templates (of components).
From the description, seems as though you should be using a service. Check out http://egghead.io/lessons/angularjs-sharing-data-between-controllers and AngularJS Service Passing Data Between Controllers to see some examples. You could define your product service (as a factory) as such: app.factory(‘productService’, function() { var productList = []; var addProduct = function(newObj) { productList.push(newObj); }; var getProducts = function(){ … Read more
You can always use the good old observer pattern if you want to avoid the tyranny and overhead of $watch. In the service: factory(‘aService’, function() { var observerCallbacks = []; //register an observer this.registerObserverCallback = function(callback){ observerCallbacks.push(callback); }; //call this when you know ‘foo’ has been changed var notifyObservers = function(){ angular.forEach(observerCallbacks, function(callback){ callback(); }); … Read more
angular.service(‘myService’, myServiceFunction); angular.factory(‘myFactory’, myFactoryFunction); I had trouble wrapping my head around this concept until I put it to myself this way: Service: the function that you write will be new-ed: myInjectedService <—- new myServiceFunction() Factory: the function (constructor) that you write will be invoked: myInjectedFactory <— myFactoryFunction() What you do with that is up to … Read more