Hey! I have a question. Can you separate a part of the controller class to be the view model? Cause currently whatever services you put and use in the controller, you have to call this.service = service in the constructor, and since this point on the service is available on the view, in the HTML. This is a really really bad thing IMO. I haven't yet found a way to do it nicely. Do you have any suggestions?

Thanks

Hey,

I guess the most cleanest way would be private fields for that kind of stuff. So until the private field proposal is getting into babel or standardized (currently it's on Stage 1), you could only use some workarounds.

One workaround could be simulating the private fields (e.g. with the Symbol workaround). I don't like any of these workarounds a lot, so I personally don't use them.

Another option would be just assigning your model to something like this.model = {} (or even this.model = new FooModel()). But that of course isn't a real "protection" or so, because you need to write $ctrl.model now in your template. You could kind of work around that by using ng-init="$model = $ctrl.model" to have it at it's own variable in the template. You could also achieve this a bit more unified, by extending a parent controller, who sets the $model variable on the injected $scope (so it's available in all templates). I can create a GitHub gist of this, if the above was too confusing described :D

In the most projects, I go with kind of plain old JavaScript and just assigning the services to this._Service using the underscore as a convention for private fields and just don't access them in the template.

But glad to hear your opinion on which ways you would prefer to use for this.

Do you know if watchers are set up for all the unneccessary properties or not? Because if that's the case this actually could be a big performance issue.

That's not a problem. Angular doesn't create watchers for anything automatically. It only creates watchers, if you bind to it in your template or use the $scope.$watch function. So if you don't use the services in your template there won't be a problem.

You can btw check the watchers (e.g. in the dev tools) by using $$watchers on any scope. So e.g. select an element in the dev tools and type angular.element($0).scope().$$watchers in the console to see the watchers registered in the scope of that element.

I didn't even finish reading yet, but I loved the Bobby Tables reference.

Hi how are you i'm development angular 1.6 with es6 and when i transpile i get can invoke class as a function have you been throught this problem?

export default class NameService {
constructor($q) {
this._$q = $q;
}

getName() {
return this._$q.when("Bobby Tables");
}
}

How is it work ? I compile this code with Babel but when is invoked getName method I get `Uncaught TypeError: Cannot read property '_$q' of undefined`. How are you solve this problem ?

You need @Inject above the constructor

The better way is declare a global variable and assign in constructor, with this.$q = $q when you use the class expose all dependencies, is redundant, insecure and unnecessary expose every dependency.

var $q;

classs MyController {
constructor (_$q) {
$q = _$q;
}
}

Hey man,

Am currently doing the same thing, but lately I've had troubles with dependency injection in my unit tests.
Any leads on unit testing angular with ES6?

Hey, thanks for this piece of explanation ! Great examples.
I have been searching for a few days a good starting point for Angular 1 + ES6, actually I work for a month for a tech company which has this stack on our actual projet, i wanted to be able to start a little project on my own with the same syntax, to make tests
I do have a few questions :

The build task does create a little problem around a ng-include that i inserted into your boilerplate :
when it is served by the gulp task, no problem, but if i launch index.html from the buil folder, it says :

XMLHttpRequest cannot load file:///home/tothe/right/path/footer/footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

have you any suggestion ?

And also : I created a module in which I inject a new controller, then the module is injected to the app.js, have you an idea why on the sub module, i have to put the controller's name and not call Controller.name ? ( an error is thrown : Controller is not a function ..)

In any case : Thanks.

about the cross domain : I found the answer : http://stackoverflow.com/qu... ( for those who'd have the same idea than I => don't open your index.html directly on chrome ! serve it ! )

Thanks for article! Very useful

You can take a look on the https://github.com/seeden/a... You are able to write directives as ES6 classes as well

How are you approaching testing?

I really liked this post and I went ahead and built my own boilerplate based on a lot of the ideas you mentioned in this post and it has allowed me to really pursue using ES6 in every project possible.

Thanks!

Thanks for writing this up! I'm not using ES6 but dropping in the 'ngInject'; hint helped me get my functions annotated properly. Don't recall seeing your suggestion clearly stated in the documentation for ngAnnotate.

Hello!

Browserify is a great tool, but I found that using jspm helps a lot with managing ES6 modules and it is also the most specifications compliant. Have you ever tried it? What's your opinion about it?

Thanks for the nice post.

Hi Luca,

I've been playing around with jspm in the context of AngularJS 2. My feeling was (and actually the reason I tried to find another solution, that then also works for Angular 1) that it is way too slow for production applications. I've had startup times of ~1.5 seconds until all modules where loaded and it even were only "local" modules i.e. files on the same server. The time also partly came from traceur and not only jspm, but in general browsers perform better in loading one large request than multiple small ones. So since I anyway try to optimize loading, startup times and performance I felt that bundling all together currently is the only solution for me to work fast enough in production.

Though if you tried jspm and you are satisfied with its performance in your app, there should be no need of changing your system.

Hope this answer is of any help and I like to hear about any experience made with alternative solutions.

Cheers,
Tim

Can't JSPM compile your modules for production?

Sure it does. bundle-sfx (https://github.com/jspm/jsp....

hello.
Really interesting for me. I'm investigating this area and trying to use Angular+ES6+Browserify as well.
But still I don't really understand why do we need to use vinyl-source-stream and vinyl-buffer in Gulp? Could you please drop me a line about it?

Hi,

browserify emits a stream of text. Gulp itself works on streams of vinyl files. The vinyl-source-stream step converts a stream of text into a stream of vinyl files (i.e. it puts all text into one vinyl file, which file name will be app.min.js in our case).

Vinyl files itself can offer their content either as buffers or as streams. vinyl-source-streams emits one vinyl file with the content as a stream (hence its name [maybe] :D). Some gulp plugins might only work correct with buffer content (and not with stream content). If you only offer streamed content you would need to know which plugins are affected and you could wrap them with gulp-streamify, so they do understand streams, or you just convert the stream content to buffer content, which is what vinyl-buffer does.

Hope that helped. Regards, Tim