The Ultimate AngularJS

You should never miss

Tips and Tricks

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

One of the best practices while framing your AngularJS code is todivide 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 andapp.run to setup $rootScope Controllers.js contains all controllers sofar

1. Make sure to divide your code

Less is a CSS pre-processor. It extends the language of CSS, whichallows 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 moreresponsive and easy to organize.

2. Use the power of less

Make a habit of creating folders by feature rather than based on filetype, 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 thefeature.

Furthur you can let it have the relevant controller (or controllers, ifhaving child ones), view, and any supporting files, like services,directives, etc.

3. Create folders feature wise

The $rootScope is global, which means that anything you add here,automatically becomes available in $scope in all controller. To set itup, 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();}};

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 itup, 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();}};

4. Define functions in the $rootScope

To use the validation which comes by default with Angular, you needto 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 checkingloginForm.$invalid.

To check this inside your controller, do $scope.loginForm.$invalid

5. Form validation

When you are making the widget like UI components that you want torun on its own with its own functionality and behavior, use directives.

It will be tempting to use controllers, but this is not the correct approachtowards 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 angularfunctions and vanilla JS instead.

7. Use directives for UI functionality

A common front-end development practice is using “Console.log(…)” asthe primary means of debugging.

This arose from necessity, as early browsers had a complete lack ofdevelopment tools for front-end code.

Most modern browsers, though, have a fairly robust set of developmenttools built-in, rendering this logic somewhat obsolete.

Chrome’s development toolschrome.com, for example, allow for all ofthe debugging functionality of a standard IDE – from line-by-linedebugging to profiling.

A break point set at the problem point of a function can provide farmore information than a simple logging statement.

8. Debugging Actively, Not Passively

One has to be very aware of memory leaks especially when workingwith HTML5 canvas, videos or have a lot of event listeners.

Many times things just keep bloating up the memory until the browserfinally crashes.

Hook up a function to the $destory event listener and clear off itemswhile leaving a page.

9. Be aware of Memory Leaks

You can switch between views while retaining the state that you’vepreviously established.

This can be done with some simple scripting, and it’s a nice thing to doin order to preserve a type of look for a project.

10. Switching from view to view and retaining state

Follow us for more

Blog.SkillHolic.com

For All Your Training Needs!