Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!

Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.

Thinking Differently About Organization

4:22 Angular 1.x lesson by

Demonstrates an “outside the box” approach to organizing controllers and directives by collecting them into objects and them passing those object to AngularJS.

Get the Code Now
click to level up

egghead.io comment guidelines


Demonstrates an “outside the box” approach to organizing controllers and directives by collecting them into objects and them passing those object to AngularJS.

John Lindquist: While we're on the topic, of thinking different, kind of outside-of-the-box, of the way you typically see either examples, there's also another way you define controller themselves, and actually directives and services and everything.

So, if I were to create an object here, just called controllers, and then I were to create things like...a named functions on here, and grab this code from here to there. Here's just basically the function that has been passed in down here. What you can do is, passing this controllers object into app.controller, and then everything will work just the same.

So you can see how you're defining an object with...just defining a list of our controllers on there, and you can do the same thing with directives, you do... [inaudible 01:07] directives...there's an object, and then you'd say directives...I think we did a panel recently, and then everything would be the same syntaxes as usual as far as restrict...et cetera and then you just pass in app.directive, and pass in the directive object.

So, you can kind of see how that will be nicer to clear separation of where your directives are and what they're attached to, and where your controllers are, and what they're attached to.

I think you can see an approach where people want to group together like the phoneapp...so this is a phoneapp module, and so we'll create an object called phoneappcomponents or stuff, name it whatever you want, and then it'll just say phoneappstuff. We'll start grouping things together that way. Then phoneappstuff.directives and phoneappstuff.controllers, and then everything should still work the same, except I didn't define anything for my panels, so it's going to throw some errors there.

Actually, sorry, the error is here...have to be this as well as this...Then that should run without any errors.

So basically all this is doing, is grouping things together, putting them into those objects. For things like "WebStorm," it groups them together nicely if you're going to navigate your code, you can see how those controllers object and I can see my list of controllers, the methods in them.

Now, again, this kind of goes against the standard convention you'll see everywhere, it also doesn't work on, I believe, filters. You can't go app.filter and then pass on an object that contains all the values of filters.

The filter just doesn't pass that quickly. So, it's not like the recommended way of doing things. It may kind of be hit-or-miss when you're getting to the nitty-gritty stuff. But again, this is all kind of a taste thing that's not going to really interfere with the way you build your app or anything, but if you think you like doing it this way, then go ahead and try it out. It's really easy to refactor out if you don't like it and that's always good to explore your options.

Joel's Head
Why are we asking?