Develop Reference

Writing complex AngularJS directive in typescript

I've found the following directive to select objects from checkboxes:
https://vitalets.github.io/checklist-model/
My problem is that we are using typescript and i have absolutely no idea how to write the given directive in typescript.
I know that the basic style is the following
module myModule {
'use strict';
export function checklistModel(): ng.IDirective {
return {...};
};
};
My problem is that I need the $parse and $compile services to get injected. I've tried to put the code from the directive in the link but I have no idea how to get the directive working.
Could someone please give me a hint on how to inject services and which part of the given code goes in the link and/or the compile?

There is no specific issue with TypeScript regarding dependency injection. Simply define the dependencies you want to inject as parameters of checklistModel. If you want to ensure that the dependencies can be resolved after a minification of the javascript files, you can define the dependencies additionally via the $inject property (This will work in normal js as well):
module myModule {
'use strict';
checklistModel.$inject = ['$parse', '$compile'];
export function checklistModel($parse, $compile): ng.IDirective {
return {
link: function() { ... }
};
};
angular.module('myModule').directive('checklistModel', checklistModel);
};
Everything else is normal angular stuff. (Beside that, the type IDirective will tell you how the return-value should look like)
I hope this will help.

AngularJS and Webpack Integration

I am looking for some help with using webpack for a large AngularJS application. We are using folder structure based on feature (each feature/page has a module and they have controllers, directives). I have successfully configured webpack to get it working with Grunt, which produces one single bundle. I want to create chunks as its going to be a large app, we would like to load modules (page/feature) artifacts asynchronously.
I am going through some of the webpack example to use 'code splitting' using require([deps],fn ) syntax. However I couldn't get the chunks lazy-loaded. First of all, I don't know where exactly, I would need to import these chunks before AngularJS would route the user to next page. I am struggling to find a clear separation of responsibility.
Did someone point me to an example AngularJS application where webpack is used to load controllers/directives/filters asynchronously after each route?
Few of the links I am following:
Should I use Browserify or Webpack for lazy loading of dependancies in angular 1.x
https://github.com/petehunt/webpack-howto#9-async-loading
http://dontkry.com/posts/code/single-page-modules-with-webpack.html

Sagar Ganatra wrote a helpful blog post about code splitting.
Suprisingly code splitting isn't really supported by angular's module system. However, there is a way to achieve code splitting by saving a reference to angular's special providers during the config-phase.
[...] when Angular initializes or bootstraps the application, functions - controller, service etc,. are available on the module instance. Here, we are lazy loading the components and the functions are not available at a later point; therefore we must use the various provider functions and register these components. The providers are available only in the config method and hence we will have to store a reference of these providers in the config function when the application is initialized.
window.app.config([
'$routeProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
$routeProvider.when('/login', {
templateUrl: 'components/login/partials/login.html',
resolve: {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
// lazy load controllers, etc.
require ([
'components/login/controllers/loginController',
'components/login/services/loginService'
], function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
});
//store a reference to various provider functions
window.app.components = {
controller: $controllerProvider.register,
service: $provide.service
};
}
]);
Now inside your loginController for instance you write
app.components.controller('loginController');
to define your new controller lazily.
If you want to lazy-load your templates too I recommend to use the ui-router. There you can specify a templateProvider which is basically a function to load templates async

This is a quote from
https://github.com/webpack/webpack/issues/150
webpack is a module bundler not a javascript loader. It package files from local disk and don't load files from the web (except its own chunks).
Use a javascript loader, i. e. script.js
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() {
// ...
});

angularjs defining services for the same module in different files

I have two files in which I define services in my angular app, but when I try to use them both in my directive, I get an error saying the service provider is not found for whichever directive I define second. It seems like one service is overwriting the other. If I change the module definition in service2.js to myapp.services2, then it works. I would think I could add multiple factories to the same module this way. Can someone point out what I'm doing incorrectly?
service1.js:
var services = angular.module('myapp.services',[]);
services.factory('Service1', function() {
// service code
});
service2.js:
var services = angular.module('myapp.services',[]);
services.factory('Service2', function() {
// service code
});
mydirective.js:
angular.module('myappdirective', []).directive('myapp', ['Service1', 'Service2',
function(service1,service2) {
// directive code
}]);

This is from the docs:
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.
Found here:
https://docs.angularjs.org/guide/module

This is possible, however will be error prone, hence not recommended
Make small modification to what you are already doing
Just do not re-declare the module variable in other files other than service1.js or put the module definition to a file of its own and include these JS file in the order of Module.js, services.js, directive.js then it will work

Understanding injection dependency in app and tests in AngularJS

I have a dependency injection (understanding) problem while testing a directive (AjaxLoader displayed only when there is a pending request).
App declaration :
angular.module('app', [
'directives.ajaxLoader',
'services.httpRequestTracker',
[...]
])
Directive code :
angular.module('directives.ajaxLoader', [])
.directive('ajaxLoader', ['httpRequestTracker',
function(httpRequestTracker) {
return {
templateUrl: 'common/ajaxLoader.tpl.html',
link: function($scope) { // This function can have more parameters after $scope, $element, $attrs, $controller
$scope.hasPendingRequests = function() {
return httpRequestTracker.hasPendingRequests();
};
}
};
}
])
Test code :
describe('ajaxLoader', function() {
beforeEach(function() {
module('directives.ajaxLoader', 'common/ajaxLoader.tpl.html');
});
describe('ajaxLoader directive', function() {});
});
From there, my directive works perfectly well in the browser, but tests fails with an error like :
Error: [$injector:unpr] Unknown provider: httpRequestTrackerProvider
<- httpRequestTracker <- ajaxLoaderDirective
Ok, so I need to inject my dependency somewhere. I have two solutions :
in my directive directly :
angular.module('directives.ajaxLoader', [
'services.httpRequestTracker'
])
in my test code directly :
beforeEach(function() {
module('directives.ajaxLoader', 'common/ajaxLoader.tpl.html', 'services.httpRequestTracker');
});
Both works, but I don't understand which one is the better and why ? And why is it working in my browser from the start and fails in my test ? In both case, all my directives and trackers are injected in my main app declaration
Thanks

Loading modules
It works in your application because services.httpRequestTracker is loaded. you did that by declaring it as a dependency of the main app module (your first code snippet).
However, when you test things, you want to mock everything that is not being tested to avoid biass. In your case, what if you had a problem in services.httpRequestTracker? ajaxLoader might be fine but your tests will fail.
Mocking
To mock everything else, you have two options:
spies (e.g. this http://angular-tips.com/blog/2014/03/introduction-to-unit-test-spies/ )
use dependency injection to substitute components
To use a dependency, you have to load the module with module().
you will have to load the dependency, but this might have a mock implementation.
Dependency Injection
Dependency injection lets you decouple classes. There is a service locator to resolve dependencies by name. That is, you say attribute a of class C is of type 'animal' (a string!). The service locator in the angular core finds which component implements it. A way of determining this is by looking up the loaded modules (e.g. dependencies of the main app module).
You didn't define any of this in your testing area (but it isn't a problem!). Karma uses a file karma.conf that contains a list of files to use. You might use this file to add libraries or mocked components.
With your particular problem:
The directive depends on httpRequestTracker. If you don't inject it there, it won't work (so it's ok).
In your test, you have to load both. That's why the first time it failed and the second it worked. However, instead of loading httpRequestTracker, I'd load a mock implementation of it.

AngularJS error: Unknown provider: app.configProvider <- app.config

I'm trying to implement the code from https://github.com/Ciul/angular-facebook or more specifically the code from http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview
I included the Javascript code from http://rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js and script.js
In script.js, I replaced:
angular.module('CiulApp', ['facebook'])
with
angular.module('app', ['facebook'])
because I already have a module called 'app' and it is the one for the entire site:
<html data-ng-app="app">
However, I get the following error in the browser console:
Error: Unknown provider: app.configProvider <- app.config
at Error ()
at http://localhost:8888/bower_components/angular-complete/angular.js:2652:15
...
...
I cannot figure out why I'm getting this error.
I do have a module called 'app.config' in my app.js file:
angular.module('app.config', []).value('app.config', { .... })
However, I don't think my app.config module is the source of the problem because I've changed the name of it and I still get same error. (I did not get any errors before I tried to implement http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview)
Can anyone help?

So, are there more than 1 line like this in your code now:
angular.module('app', [...
?
One for initializing the module, another one for handling Facebook auth? If yes, try this:
Locate the 1st occurrence of the code (that is, where you declare the module) and put all dependency declarations there:
angular.module('app', ['facebook', 'other dependencies...'])
Then, locate the other line, where you are dealing with the FB auth, and replace it with:
angular.module('app').doYourStuff(
This way you will declare the module only once, and when you want to alter it, you'll get the already initialized version instead of creating another module over and over.

It would be easier if you would provide jsFiddle/plunker of the non-working code. Anyway it seems that you are initializing your 'app.config' module with itself
angular.module('app.config', []).value('app.config', { .... })
and because your are not giving enough information I'm guessing that your trying to inject your 'app.config' somewhere in your code?
If you want to configure you 'app' you should do in this way
angular.module('myModule',[]).value('foo'{bar:'abc'})
angular.module('app',['myModule']).config(function($routeProvider){
$routeProvider.when('/',{templateUrl: 'partials/phone-list.html', controller:'SomeCtrl')
}).run(function($foo){
alert($foo.bar)
})
Also checkout the documentation how to use modules. AngularJS : module