The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Using Services in Angular Directives

Using Services in Angular Directives

5:19
Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.
Watch this lesson now
Avatar
egghead.io

Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.

Avatar
Paul

You are using bindToController, which is cool, but I don't think it has any effect in your scenario. appCtrl gets into the template namespace courtesy of controllerAs. I think bindToController lets you do an isolated scope and have those copied onto the controller instance automatically.

In reply to egghead.io
Avatar
Joel

You are using bindToController, which is cool, but I don't think it has any effect in your scenario. appCtrl gets into the template namespace courtesy of controllerAs. I think bindToController lets you do an isolated scope and have those copied onto the controller instance automatically.

This is correct, bindToController isn't needed/used in this circumstance, since we aren't using an isolate scope. It doesn't hurt anything either, but is "cruft"

In reply to Paul
Avatar
John

bindToController is habit now for me (and I just finished recording a bindToController video :) )

I was going to dive more into the concepts/similarities of scope and stateParams, so I was planning on using it, but the video was getting too long so I left it out.

In reply to Paul
Avatar
Paul

I'm glad that you're showing it. I stumbled across it last week. Despite paying attention intently, I missed it. I also am using it full-bore, so kudos for making it part of your regular process. Hopefully it will sink in for people, and look forward to the bindToController video.

OT: Saw your tweet about angular.component and the discussion on the ticket. I keep hoping Angular will use 1.4 to "backport" some of the best practices for 2.0. It would be neat if angular.component was considered a lead-in to the web component concept, if not implementation, for 2.0. But that's the opposite of what you advocated for, which is a low-barrier quick change for syntactic sugar. [wink]

In reply to John
Avatar
Joel

Check out bindToController lesson for some details about that awesome feature.

In reply to Paul
Avatar
John

Yeah, "component" is a loaded word so maybe "widget" makes more sense for what I suggested.

I agree with your idea for 1.X to lead into 2.0 features, but it's still way too early to consider until 2.0 is released. Imagine if 2.0 changed, then 1.X is stuck with the wrong backport concepts :/

In reply to Paul
Avatar
Paul

I didn't see the bindToController video posted, sorry! BTW, you should put date stamps on your pages. Helps me know when a lesson came out (though I can always check the Disqus first post.)

On the 2.0, I think there are things that are here now that will be building blocks in the future. For example, a 1.4 that would be supported when running under Traceur. Perhaps even letting you have an angular.component that pointed at a Traceur class. :) Or, CommonJS support. These are some major "best practices" coming that could, in theory, work now and really change how people think about the future development process.

In reply to John
Avatar
Paul

Back to egghead.io lessons though. [wink] I'm a PyCharm customer. I can NEVER get my Angular setup working as smoothly as your WebStorm setup. I'd love some lessons on Awesome Angular with the JetBrains family.

In reply to John
Avatar
John

WebStorm videos are coming (along with a book shameless self-plug).

And the "bindToController" video was posted right after this one. So you didn't miss it, it just wasn't there yet.

In reply to Paul
Avatar
Martin

Hi John. Is there any particular reason why you left the alertService reference attached to AppController or it can be removed from there, so final result will look like this:

.controller("AppCtrl", function AppCtrl(alertService) {
var app = this;
app.somethingFailed = function () {
alertService.alertMessage = "Invoked from AppCtrl";
alertService.alertType = "success";
};

})
In reply to egghead.io
Avatar
John

This example isn't using it, but if you want to use alertService from the HTML for some other reason in the future then you'll need it.

In reply to Martin
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?