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.
Optimization of the Structure of Code
Perhaps the most fundamental of beginning any project is to assure the foundation where it rests should be strong. Many times the situation turns in a way where the developer might have already started with the code but was unable to maintain the flow later. Which is why it is imperative that you must plan for everything which even includes the folder. This might sound like your mother’s demand to clean up your room but the benefits of it lower distractions immensely. Putting all the shared data and component files in “app/common” folder while resources go to the “asset” folder, makes it more organized.
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.
Integrate Less to Create CSS
Less is a pre-processor of CSS and allows features such as operators, mixins and functions. The use of Less is usually recommended by many developers to develop AngularJS. This helps in multiple advantages such as offering high-level styling syntax to allow web developers to produce advanced CSS. Easy transfers of pre-compiled CSS files to a production web server.
Use of Built-in Validations
AngularJS has an excellent feature to auto-validate your form. This ability can become the backbone of any application that gets the input from the user. The validation, however, has to pass through a chain of code blocks. They have a number of ‘If, else If’ which can cause unwanted complexities. In this case, the user has to submit the form a number of times to be able to handle a single validation error after the other.
AngularJS has a different form of validation which happens as the user fills it out. All of these validations are inherent to AngularJS in the form of directives.
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
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 of 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.
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 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.
Angular has become highly popular with programmers and as more and more people are trying to learn AngularJS along with Angular 2 and Angular 5. If you want to try out a course on Angular 5 (the latest of the three), you can opt for ‘Build A Complete CMS App Using Angular 5‘ online tutorial.
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!
Originally published by eduonix
https://blog.eduonix.com/web-programming-tutorials/angular-js-tips-for-beginners/
