12 AngularJS Tips for Beginners

2
1846
Angular JS Tips for Beginners

Angular JS Tips for Beginners

Of the many open-source JavaScript frameworks out there, AngularJS is one of the better-known ones.
It’s maintained by Google and is currently in use by a ton of corporate websites, including NBC, ABC News, Walgreens, Intel, and Sprint – to say nothing of the thousands of smaller businesses and private websites that use it as well. It’s a really popular framework because of the support it has and because of interactivity it has with Node JS and Express JS as a back end framework. AngularJS works mostly in the front end.

One of the stated goals of AngularJS’s development team is to simplify the development process of a lot of front end type stuff to make it easier for beginners and veterans both to excel and create great designs that work well. However, as with any undertaking, starting to work with a new language or framework can be tricky. This article is meant to give new users of AngularJS a few helpful tips about things that they might not have realized, even if they’re coming from a web development background already. Some of these are things to avoid, others are things that simplify systems or concepts within AngularJS. Experienced users of AngularJS might find a lot of the content here to be pretty simplistic, but there’s always a chance you’ll learn something new all the same.

Group files and objects based on features not type

As a framework, Angular is pretty reliant on MCV. Although it might not seem that way at first glance, and there are some exceptions, it follows the model of an MCV framework pretty well in its architectural pattern. That can be a little misleading, because in most MCV frameworks, you group files by type. However, this doesn’t work too well, especially in situations with a bunch of modules where too many open folders can result in a lot of wasted processing power. Instead, try organizing using common features on files and objects.

Inject dependencies

Injecting dependencies is one of the features that AngularJS really excels at. As a pattern, it’s useful for simplifying testing processes. It’s also as easy to use as adding a line of code to the main process feature of the object you’d like to use it on. It sort of minifies the code to a much smaller and nimbler format that’s easy to test.

SRP for controllers

Controllers are kind of the bread and butter of a lot of AngularJS features, and the primary component of a lot of apps and modules. However, you’re going to want to keep an eye on how many of these you’re using – it’s really easy to employ too many controllers and slow your process down as a result. Stick to the Single Responsibility Principle (SRP) – employ the most minimal amount of logic between the view and the module.

Understand service and factory differences

These terms can be a little confusing at first. In AngularJS, they stand for almost the same thing. A lot of the time, they fill the same role, but sometimes, they’re slightly different, and that’s what you want to watch out for.

Utilize Batarang

Batarang is an extension to Google Chrome. It helps you debug and develop AngularJS apps. Some of its features include model browsing, which helps testing, performance analysis, and a dependency graph to help you map out how features work on user spaces.

Avoiding repeat

Ng repeat is a pretty common error that people experience when developing in AngularJS, especially as beginners. The easy solution is to just never put yourself in a situation where it will occur by limiting scrolling potential on pages. Otherwise, you can avoid it by installing pagination or an infinite scroll on your app.

Avoid repeated filters and cache data

Caching data helps speed up loading time for items that you’ll use a lot, like very common images or other common data items that it’d take a lot of time to constantly re-download. By the same token, you’ll want to avoid repeated filters, because of those is actually a one-time binding that can pile up into a mess that hogs a ton of data.

Benchmark your functions

benchmarking-19to1
This is a function of Batarang and other free analysis tools. Benchmarking lets you record data about how a thing is performing so that you can later improve on its performance and track what has changed.

Use bind

Although you definitely don’t want to misuse it, a newer version of AngularJS added : : to its notation to stand for a one-time binding. Obviously, there are a lot times this can be really helpful, but like I said, you don’t want to overuse it, or you’ll run into a lot of problems and bloat up your codebase, too.

https://blogeduonix-2f3a.kxcdn.com/wp-content/uploads/2015/10/Learn-Javascript-And-JQuery-From-Scratch.png

Testing tools

Like I mentioned before, testing tools like Batarang and other analytics and tools such as Chrome Timeline and Chrome Profiler can really improve your testing experience. These are all available for free through Google Chrome, which is really where you should be doing your testing anyway, since its an environment that natively supports AngularJS.

Stop using jQuery

jquery vs angularjs
JQuery is a great resource, and it’s one that a lot of people like to use. Unfortunately, jQuery’s philosophy and AngularJS’ really don’t combine very well. For one, a lot of jQuery wrappers will manipulate the DOM, which is something that’s only handled through directives in AngularJS. The differences run pretty deep, and if you really want a greater understanding of AngularJS, you’ll have to leave jQuery behind to get it.

Minimize watchers

Another use of Batarang, minimizing your watchers is a useful thing for testing because it clears up your viewscreen and simplifies the overlay to a degree that can help you a whole lot.

Hopefully, these tips will get you thinking about how to use AngularJS and will improve your new user experience with a very dynamic and powerful framework!

2 COMMENTS

  1. Very nice tips, You can get many tutorials, but you wont get these types of tips and tricks that every angularjs developer should learn to make his life easier.

LEAVE A REPLY

Please enter your comment!
Please enter your name here