Mistakes AngularJS Developers Make

#1

Post by davidkellis » Fri, Oct 03, 2014, 4:18 PM UTC

Mistakes AngularJS Developers Make
airpair.com

Re: Mistakes AngularJS Developers Make

#2

Post by rezistik » Fri, Oct 03, 2014, 5:27 PM UTC

I've never understood the pattern of separating out services, controllers and directives into different modules. Your post controller is probably going to need your post service, so why put them in separate modules? Makes more sense to have a post module with your WYSIWYG directive, post service, post controller, etc.

Every time I see it I just wonder aloud, what problem did you think this solved?

Re: Mistakes AngularJS Developers Make

#3

Post by troybetz » Fri, Oct 03, 2014, 5:30 PM UTC

Grouping files by feature has made navigating and reasoning about a codebase so much easier. I've even found myself grouping stylesheets & test files alongside templates and app code, it really helps enforce the idea of composing smaller apps together.

Google has released a recommended app structure similar to this as well [0], though I haven't actually seen it being used too often in the projects I've come across.

[0] - https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDz...

Re: Mistakes AngularJS Developers Make

#4

Post by yesimahuman » Fri, Oct 03, 2014, 5:31 PM UTC

The modules one isn't necessarily true. I'm seeing a lot of Angular devs keep things under one module (esp for libraries). I don't think the value of multiple modules has really been realized. Exs: we do this for Angular Material and Ionic.

Re: Mistakes AngularJS Developers Make

#5

Post by emgeee » Fri, Oct 03, 2014, 5:33 PM UTC

rezistik wrote: post #2

I've never understood the pattern of separating out services, controllers and directives into different modules. Your post controller is probably going to need your post service, so why put them in separate modules? Makes more sense to have a post module with your WYSIWYG directive, post service, post controller, etc. Every time I see it I just wonder aloud, what problem did you think this solved?

I think it was such a ubiquitous pattern in tutorials and apps early on that it became a norm people didn't question. As the author mentioned, it isn't really something that matters too much until you really start to build a complex app.

In my own experience, I've found taking such a modular approach too early on can actually hinder productivity as I find myself spending too much time on boilerplate and figuring out if, for example, this service REALLY belongs with feature X or feature Y.

Re: Mistakes AngularJS Developers Make

#6

Post by joshfinnie » Fri, Oct 03, 2014, 5:35 PM UTC

These are great suggestions!

I really enjoy 1, 9 and 10. Learn something new everyday.

Re: Mistakes AngularJS Developers Make

#7

Post by maaaats » Fri, Oct 03, 2014, 5:41 PM UTC

troybetz wrote: post #3

Grouping files by feature has made navigating and reasoning about a codebase so much easier. I've even found myself grouping stylesheets & test files alongside templates and app code, it really helps enforce the idea of composing smaller apps together. Google has released a recommended app structure similar to this as well [0], though I haven't actually seen it being used too often in the projects I've come across. […

I understand the grouping of the JS files by feature. But I have a hard time including the partials/HTMLs with that. Because when building (concat, minify etc) the project, they will then need to be copied around and all template-references updated.

It's easier instead to just dump all of them into one place and copy that folder, no need to update references etc. then.

Any ideas on how to solve this?

Re: Mistakes AngularJS Developers Make

#8

Post by nuclearghost » Fri, Oct 03, 2014, 5:42 PM UTC

yesimahuman wrote: post #4

The modules one isn't necessarily true. I'm seeing a lot of Angular devs keep things under one module (esp for libraries). I don't think the value of multiple modules has really been realized. Exs: we do this for Angular Material and Ionic.

Hey I'm the author of the article. I created a library of modules that were reused across single page apps. For individual libraries I agree it doesn't make sense, but not enough people take advantage of the module system

Re: Mistakes AngularJS Developers Make

#9

Post by maaaats » Fri, Oct 03, 2014, 5:43 PM UTC

Point 3 about "Dependency injection" is often not needed. Just use ng-annotate before minify/uglify, and it will convert the code to the array syntax for you. It handles most of the cases, leaving your code without the ugly array stuff.

It doesn't work for everything, though, so suddenly it blows up. So if you want to be 100% sure your code works as intended do it manually.

Re: Mistakes AngularJS Developers Make

#10

Post by nuclearghost » Fri, Oct 03, 2014, 5:44 PM UTC

maaaats wrote: post #7

troybetz wrote: post #3

Grouping files by feature has made navigating and reasoning about a codebase so much easier. I've even found myself grouping stylesheets & test files alongside templates and app code, it really helps enforce the idea of composing smaller apps together. Google has released a recommended app structure similar to this as well [0], though I haven't actually seen it being used too often in the projects I've come across. […

I understand the grouping of the JS files by feature. But I have a hard time including the partials/HTMLs with that. Because when building (concat, minify etc) the project, they will then need to be copied around and all template-references updated. It's easier instead to just dump all of them into one place and copy that folder, no need to update references etc. then. Any ideas on how to solve this?

Yeah I think that's a fair point. It's easy enough to write a grunt or gulp task that does the copy. Not too hard to copy all the *.html files from the app directory. The time savings for development are worth it to me