We Keep Coding

Using $watch on an AngularJS service function defined as an ES6 class

I'm using ES6 with AngularJS and am following this guide. It recommends defining services as classes.
In a service definition I'm injecting the $cookieStore service and attaching it to the class like this:
export default class Authentication {
constructor($cookieStore) {
this.$cookieStore = $cookieStore;
}
setAuthenticatedAccount(account) {
this.$cookieStore.put(JSON.stringify(account), 'authenticatedAccount');
}
isAuthenticated() {
return !!this.$cookieStore.get('authenticatedAccount');
}
}
I want to update my navbar to reflect whether or not the user is logged in, which I'm doing with $watch:
var NavbarController = function($location, $scope, Authentication) {
$scope.$watch(Authentication.isAuthenticated, () => {
$scope.isAuthenticated = Authentication.isAuthenticated();
$scope.currentUser = Authentication.getAuthenticatedAccount();
});
}
This gives the following error:
Cannot read property '$cookieStore' of undefined.

This error usually occurs when you don't inject proper dependencies in your controller.
Just make sure that $cookieStore is propertly injected in your angular controller
myApp.controller('myCtrl', ['$scope', '$cookieStore', function ($scope, $cookieStore) {
...
...
point to note
The $cookieStore service is deprecated. Please use the $cookies service instead.

Calling module constant?

I have the following Angular module. How can i call for example APIHost from one of my controllers?
angular.module('configuration', [])
.constant('APIHost','http://api.com')
.constant('HostUrl','http://example.com')
.constant('SolutionName', 'MySite');

Constant is nothing but one kind of provider recipe.
You need to inject constant dependency inside your controller factory function, that's it.
app.controller('testCtrl', function($scope, APIHost){
console.log(APIHost)
})
Make sure your configuration module has been added to main module as dependency
to get use of constant's provider like below
var app = angular.module('app', ['configuration', 'otherdependency']);
app.controller( ... ) //here you can have configuration constant available

Like this, just like any service or factory.
I have also include structure for industry standard (kind of) from john papa's coding guidelines.
(function() {
'use strict';
angular
.module('configuration')
.controller('ctrlXYZ', ctrlXYZ);
//Just inject as you would inject a service or factory
ctrlXYZ.$inject = ['APIHost'];
/* #ngInject */
function ctrlXYZ(APIHost) {
var vm = this;
activate();
function activate() {
//Go crazy with APIHost
console.log(APIHost);
}
}
})();
Hope the helps!

Dynamically injecting a specific factory based on route parameter fails for some reason

I want to dynamically inject a factory into my Angular controller based on the route parameter. This is my route configuration:
$routeProvider
.when("/tables/:table",
{
controller: "tableController",
templateUrl: "/app/views/table.html",
resolve: {
"factory": function r($route) {
return $injector.get($route.current.params.table + "Factory"); // Error!
}
}
})
For instance, when the route is tables/employee, I want an employeeFactory to be injected into tableController, and so on.
Unfortunately, this configuration does not work — I am getting an Unknown provider: employeeFactory error in the r function.
On the other hand, I can instead pass an $injector service directly to the tableController and successfully resolve employeeFactory there:
(function (angular) {
var tableController = function ($routeParams, $injector) {
// employeeFactory resolves successfully here!
var factory = $injector.get($routeParams.table + "Factory");
};
angular.module("appModule").controller("tableController", tableController);
})(angular);
However, I do not like this approach because it follows the service locator anti-pattern. I would really like factory to be injected using routing configuration and not this ugly workaround.
So, why Angular is throwing an error when using $injector.get() with resolve, but successfully resolves the factory inside of the tableController? I am using Angular 1.4.4.

You apparently use $injector that was injected into config block, and it differs from $injector that is injected anywhere else. The former acts on service providers, the latter acts on service instances.
It should be
"factory": function r($route, $injector) {
return $injector.get($route.current.params.table + "Factory");
}

How do I know what dependencies I can inject into a controller?

I am trying to use $routeProvider dependency inside my controller:
.controller('mainController', function($scope, $state, $routeProvider) {
But I am getting the error:
Error: [$injector:unpr] Unknown provider: $routeProviderProvider <- $routeProvider
How do I know what dependencies I can inject into any given controller?

There are two phases inside angular
Configuration Phase (Here we use app.config to write a code)
Run phase (Where we use app.run, after run cycle all other directives gets executed using compile cycle)
Provider is nothing but service/factory but the most important thing is it can be accessible inside configuration phase.
Example
Suppose we have below provider
myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
var useTinfoilShielding = false;
this.useTinfoilShielding = function(value) {
useTinfoilShielding = !!value;
};
this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {
return new UnicornLauncher(apiToken, useTinfoilShielding);
}];
});
While inject it inside config you should always prefix it Provider like unicornLauncherProvider
While using it inside controller you could use it as unicornLauncher
Note:
Provider are always accessible inside .config(configuration)
phase with suffix Provider in their name, While inside controller you could > directly inject it using unicornLauncher (direct provider name)
Services/Factory They are not visible in config phase of angular
Still confuse then do refer this link

You can only access services in the controller not the providers so use $route here.
Therefore you are getting error $routeProviderProvider becuase it is looking for the provider for $routeProvider which is itself a provider for $route.
Docs

AngularJS: Share factory between multiple modules

Let's say I have a module called App which injects two other modules called factories and controllers:
var app = angular.module("app", ["factories", "controllers", "directives"])
.run(function ($rootScope, userFactory) {
userFactory.property = "someKickstartValue";
});
The factories module holds all factories:
var factories = angular.module("factories", []),
factory = factories.factory("testFactory", {
property: "someValue"
});
And the controllers module holds all controllers:
var controllers = angular.module("controllers", ["factories"]),
controller = controllers.controller("controller", function ($scope, testFactory) {
console.log(testFactory.property); // Returns "Some Value" and not
// "someKickstartValue" as expected.
});
The actual Question:
Why does the "someKickstartValue" not apply to the controllers? As far as I do understand the module app has it's own testFactory instance and the module controllers has it's own as well, so there can't be any information shared between modules via factories. Is there a way around, or have I made a mistake?

I fixed it by removing the "factories" dependency of the controller.
var controllers = angular.module("controllers", []),
controller = controllers.controller("controller", function ($scope, testFactory) {
console.log(testFactory.property); // Returns "someKickstartValue" as expected
});
Because I now do not declare factories as dependency, the controllers module doesn't create it's own instance of factories and has access to the instance of the app module which injects the controllers module.

I faced the same problem. I solved it in the following way:
// modules.js
(function (angular) {
angular.module("shared", []);
angular.module("user", ["shared"]);
angular.module("admin", ["shared"]);
})(window.angular);
Such structure allows to use factories, services, directives attached to the shared module in other modules.