Develop Reference

jsDoc - set type without importing file

I'm using Angular 1 in VScode. I have a main file that defines all my services, controllers etc and require's them against Angular.
angular.module('myApp', [])
.service('myService', require('./myService.js')
.controller('myController', require('./myController.js');
and the service:
class MyService {
constructor() {}
}
module.exports = MyService;
and my controller
class MyController {
constructor(myService) {
/** #type {MyService} */
this.myService = myService;
}
}
module.exports = MyController;
As a result intellisense has no idea what myService is within the controller. I had hoped that the jsDoc comment would have solved this issue as both files are within the same work-space but it does not.
I have seen the type-def comment and tried writing a custom type in the service file :/** {MyService} CustomService */ then reference the CustomService type in my controller but that doesn't work either.
In Short
Is it possible, using jsDoc in VSCode to reference a class from a different file without requiring it into the current working file.
Thanks for any insight all.

No, as of VScode 1.14 this is not possible but we are tracking a discussion of this functionality here: https://github.com/Microsoft/TypeScript/issues/14377

AngularJS $inject error in service injection

I'm newbie in Angular, so will be glad if you can help me.
I split my logic on 2 files (controllers and services).
My services code:
(function () {
'use strict';
angular
.module('app', [])
.factory('authservice', authservice);
authservice.$inject = ['$http', '$logger'];
function authservice($http, $logger) {
return {
signInOwner: signInOwner,
signUpOwner: signUpOwner
};
function signInOwner(owner) {
}
function signUpOwner(owner) {
}
};
})();
My controller code:
(function () {
'use strict';
angular
.module('app', [])
.controller('SignUpController', SignUpController);
SignUpController.$inject = ['authservice'];
function SignUpController (authservice) {
var vm = this;
}
})();
I include my services.js before controller.js but still got error about wrong authservice dependencies
angular.js:14362 Error: [$injector:unpr]
Could you help me, please?

Using this synthax angular.module('app', []), you are overwriting the module creation.
You should use angular.module('app') to retrieve it instead.
[] should be use only once: at the creation of the module.
From the Angular module doc:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.

In your controller code replace:
angular
.module('app', [])
.controller('SignUpController', SignUpController);
for
angular
.module('app') // notice the lack of [] here!!
.controller('SignUpController', SignUpController);
This is because with the [] it means you're creating the module and without it it means you're locating the module. Since the module was created when your where creating your service, you don't need to create it again, just locate it.

Inject $rootscope into services module

How would I inject $rootscope into wenzey.services so it is accessible across my application?
(function () {
'use strict';
/**
*
*/
angular
.module('wenzey.services', '$rootScope', [])
$rootScope.type = "consumer";
})();
This is the error message I am currently getting:
Uncaught ReferenceError: $rootScope is not defined
Uncaught Error: [$injector:modulerr] Failed to instantiate module wenzey due to:
Error: [$injector:modulerr] Failed to instantiate module wenzey.services due to:
Error: [ng:areq] Argument 'modulesToLoad' is not an array

You are using wrong definition for a module. You are mixing a module with a service. You need to understand the below to use them properly:
You specify a module as a dependency of other module in module definition. E.g.
angular
.module('wenzy.services', [])
.factory('AppService', function () {
// Add methods
});
Now you can use the module wenzy.services as a dependency while defining module wenzy.controllers as below:
angular
.module('wenzy.controllers', ['wenzy.services']);
You inject a service in another service/ controller while defining the service/ controller . E.g. We have injected the service AppService in the AppController below
angular
.module('wenzy.controllers', ['wenzy.services'])
.controller('AppController', function (AppService) {
// Add controller defintion
})
The $rootScope is a service provided by angular and can be injected into any service/ controller. You don't need to add that as part of module definition.

Component doesn't resolve injection of $scope (angular 1.3.16)

I have encountered a really weird error. I'm working on a project where we're using John Papa's AngularJS styleguide.
I have the following component-file, my-profile.component.js, attached to app.mymodule
my-profile.component.js
(function() {
'use strict';
angular
.module('app.mymodule')
.component('myProfile', { })
.controller('MyProfileController', myProfileController);
/*#ngInject*/
function myProfileController($scope) {
...
}
})();
The component is rendered using in my view file.
app.mymodule is defined in mymodule.module.js
mymodule.module.js
(function () {
'use strict';
angular
.module('app.mymodule', []);
})();
And app is defined in app.modules.js, where app.mymodule is set as an app dependency
app.modules.js
(function() {
'use strict';
angular
.module('app', [
...
'app.mymodule'
]);
})();
my-profile.component.js compiles to the following code
my-profile.component.js (compiled)
(function() {
'use strict';
angular
.module('app.mymodule')
.component('myProfile', { })
.controller('MyProfileController', myProfileController);
myProfileController.$inject = ['$scope'];
function myProfileController($scope) {
...
}
})();
But for some reason, angular fails to inject the $scope-service, or any other service I attempt to inject. It produces the following error:
Error: [$injector:unpr] Unknown provider: 1FilterProvider <- 1Filter
http://errors.angularjs.org/1.3.16/$injector/unpr?p0=1FilterProvider%20%3C-%201Filter
at REGEX_STRING_REGEXP (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7eNaNbundles%fjs%fvendor:63:12)
at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4031:19
at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4036:45
at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
at $get [as $filter] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:16705:24)
at Parser.filter (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12234:19)
at Parser.filterChain (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12228:19)
at Parser.primary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12079:22)
at Parser.unary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12374:19)
I have another component in the same folder, attached to the same module, where I can easily inject any service. It looks as follows:
(function () {
'use strict';
angular
.module('app.mymodule')
.component('loginView', { })
.controller('LoginViewController', loginViewController);
/*#ngInject*/
function loginViewController($scope, $location) {
...
}
})();
I really can't figure out what I'm doing wrong. I've spellchecked, doublechecked, started over on the component, attempted to $inject $scope on the controller manually, but to no avail.
Does anyone have a clue what's going on here? :)
EDIT
As rolandjitsu pointed out, it was a problem in my view-file. I had used ng-pattern wrongfully, but was mislead by my own inability to interpret angular console-errors and a 'mildly' misleading error description in the angular docs.

Yes, it seems like you are missing a service provider called 1Filter. Maybe a missing module or some files missing?
Note: It has nothing to do with the $scope, it should not fail because of that.

Create a Reusable AngularJS provider/directive/factory, etc

I am attempting to create a number of AngularJS libraries that can be re-used across apps and modules. I thought i was doing everything correctly but am still having a problem.
First I create a file that defines a generic module (app.ui) and attaches a provider (LayoutManager) to it ... (I am using a jQuery plugin called "jQuery Layout". This provider allows the app to access and manipulate the layout parameters. I don't want to get hung up on the details of the plugin however. The question is more general, but thought I should at least provide some explanation)
angular.module("app.ui", [])
.provider('LayoutManager', [function () {
'use strict';
var appLayout = $('body').layout(),
moduleNavLayout = $('.module-nav-container').layout(),
moduleLayout = $('.module-content-container').layout();
return {
$get: function () {
return {
ApplicationLayout: appLayout,
ModuleNavigatonLayout: moduleNavLayout,
ModuleContentLayout: moduleLayout
}
}
}
}]);
Then I identify the module (app.ui) as a dependency of the "app" (ListMgrApp) I want to use it in.
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"])
Then I inject (is that the correct terminology?) the specific provider (LayoutManager) into the application ...
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"]).
config(['$stateProvider', 'LayoutManager',
function ($stateProvider, layout) {
'use strict';
// initialization code goes here
}]);
While it appears that the code inside the LayoutManager provider DOES execute, which I believe is due to it being included as a dependency for the app, I am still getting the following error from the application when it runs.
Uncaught Error: [$injector:modulerr] Failed to instantiate module ListMgrApp due to:
Error: [$injector:unpr] Unknown provider: LayoutManager
I have verified that the source code for all required files are being successfully down loaded.
What am I missing?
RESOLUTION
Thanks elclanrs for the answer! I just wanted to add what exactly I updated to make it work.
I added "Provider" to the name of the provider (LayoutManager) in the config() method of the app (ListMgrApp). I had originally thought I was supposed to also change the name of "LayoutManager" in the provider code but misread the original solution comment. Only change the name in the app config() method. I thought I would point it out here just in case someone else was a "skimmer" and missed it.
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"]).
config(['$stateProvider', 'LayoutManagerProvider',
function ($stateProvider, layout) {
'use strict';
// initialization code goes here
}]);