The Ultimate AngularJS Tips and Tricks You should never miss

by:

ProgrammingResourcesTips & Tricks

The first version of AngularJS was released in 2009 and has become more popular for developing web applications. In this article, we would like to share you few tips and tricks useful while working with AngualrJS. Some of them seem to be very basic to you but could come in use anytime.

1. Make sure to divide your code

One of the best practices while framing your AngularJS code is to divide it into two files. The first is the app.js and the second is the controllers. App.js contains code for setting up routes, app.factory functions and app.run to setup $rootScope Controllers.js contains all controllers so far

2. Use the power of less

Less is a CSS pre-processor. It extends the language of CSS, which allows it to add features, such as mixins, functions, and much more. A lot of people suggest using Less when programming with Angular. It can simplify a lot of things and make Bootstrap tables much more responsive and easy to organize.

 

Want to learn AngularJS in an Instructor-led online session? Learn AngularJS from Live Expert.

 

3. Create folders feature wise

Make a habit of creating folders by feature rather than based on file type, this is called vertical slicing sometimes. The idea is instead of having folders named like “Controllers”, “Views”, “Services”, etc., you can have the folders named after the feature. Furthur you can let it have the relevant controller (or controllers, if having child ones), view, and any supporting files, like services, directives, etc.

4. Define functions in the $rootScope

The $rootScope is global, which means that anything you add here, automatically becomes available in $scope in all controller. To set it up, you need to do something like this

app.run(function($rootScope) {
$rootScope.hello = function() {
console.log('hello');
}
});

This should now be available in controllers

function MainCtrl = function($scope) {
$scope.save = function() {
$scope.hello();
}
};

Want to learn AngularJS in an Instructor-led online session? Learn AngularJS from Live Expert.

 

5. Form validation

To use the validation which comes by default with Angular, you need to follow the following steps

  • Give a “name” to your form e.g. <form name=”loginForm”>
  • Mark all required input boxes as required e.g. <input type=’email’ required />
  • To turn on say email validation, you need to set type=’email’
  • Check if the form is validating or not by checking loginForm.$invalid. To check this inside your controller, do $scope.loginForm.$invalid

 

6. Syntax of directives

The tutorial of AngularJS writes directives like this: “ng-model”. But you can also write: “x-ng-model”, “ng:model”, “ng_model”, “data-ng-model”. They are all equivalent and work the same. I like to use the syntax with “data-” because it is standard-compliant.

 

7. Use directives for UI functionality

When you are making the widget like UI components that you want to run on its own with its own functionality and behavior, use directives. It will be tempting to use controllers, but this is not the correct approach towards a solution. And while we are on the subject, learn to live without jQuery. We are so used to it by now, but instead, try to use the internal angular functions and vanilla JS instead.

Want to learn AngularJS in an Instructor-led online session? Learn AngularJS from Live Expert.

 

8. Debugging Actively, Not Passively

A common front-end development practice is using “Console.log(…)” as the primary means of debugging. This arose from necessity, as early browsers had a complete lack of development tools for front-end code. Most modern browsers, though, have a fairly robust set of development tools built-in, rendering this logic somewhat obsolete. Chrome’s development toolschrome.com, for example, allow for all of the debugging functionality of a standard IDE – from line-by-line debugging to profiling. A break point set at the problem point of a function can provide far more information than a simple logging statement.

 

9. Be aware of Memory Leaks

One has to be very aware of memory leaks especially when working with HTML5 canvas, videos or have a lot of event listeners. Many times things just keep bloating up the memory until the browser finally crashes. Hook up a function to the $destory event listener and clear off items while leaving a page.

10. Switching from view to view and retaining state

you can switch between views while retaining the state that you’ve previously established. This can be done with some simple scripting, and it’s a nice thing to do in order to preserve a type of look for a project.

Want to learn AngularJS in an Instructor-led online session? Learn AngularJS from Live Expert.

Here is a bonus video for you picked from one of talks by HiRez.io

 

 

Has something to add to the article? Share your thought in comments.

Comments

comments

Comments are closed.