What are some time-saving tips every AngularJS user should know?

Today I’ll be quoting my answer to this question on Quora: What are some time-saving tips every AngularJS user should know?

The Answer

I have read so many advices, most of them are the same, some of them come from the time angular was new and everyone was just worried about reverting to jQuery. Now, these are what I learned:

  • Use routing from the very beginning, go ahead and include ui-route and architect your pages around the idea of routing, don’t be afraid of using child routes / child states

  • Include jQuery, for a “large app” you’re likely to need it anyway, and sometimes the behavior changes when its included (for example, a bad one in fact, historically at least ng-touch for mobile doesn’t stop the 300ms click delay when jQuery is included). If you are building a mobile app maybe this’d be different, but read the next one if you read this

  • Write directives (and filters). Don’t be afraid of writing them. You know all the advice about not doing DOM and stuff? Don’t worry about these much, just make sure whenever you do it, you are doing it in a directive. And yeah, don’t worry about having “too many directives”, most people have the opposite problem; also don’t worry about remembering the syntax, I almost always copy it from another one or docs, don’t let that make you write less directives.
    Same thing applies to filters BTW, write as many of these as you feel you need, sometimes you’ll want to keep them next to the controller they are used in, that’s fine, really.

  • Use services, whenever the controller feels too long (what’s so long? up to you, compare to a regular server MVC controller action, or a class in Java/C# and apply whatever rules you use there), or seems to have so many dependencies (too many function parameters) consider encapsulating most of the logic in a service or more. Think of services as a way to breakup up code more than a way to make it reusable, meaning, don’t fear building one or more services to serve one controller.

  • Write a different CSS file per route view, and use clear classes or so to make sure the CSS doesn’t have conflicts when all combined/minified together (because of course you use some sort of combining/bundling and minification, right?). Of course you’ll also have some shared files (per site and per application module / feature / route) for reusable stuff.

  • Create folders by feature, not by file type. this is called vertical slicing sometimes. The idea instead of having folders named like “Controllers”, “Views”, “Services”, etc., have the folders named after the feature instead (that’s the route most often, but not necessarily, feel free to have some matching route names and some not, it’s OK), and let it have the relevant controller (or controllers, if having child ones), view, and any supporting files, like services, directives, etc.

Disclaimer: Note this is not about being new to Angular or doing JS in general. This is what will help most for “big” applications, although you can use some of it in smaller apps as well of course.

Share With Friends:

P.S. Please help me out by checking this offer, then look below for a small Thank You.

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer goodies.