AngularJS Tutorial with Tips for Beginners

Welcome to this AngularJS tutorial for beginners. Today, we’ve brought up some of the best tips and tricks for AngularJS developers. Also, it’ll include best practices for writing AngularJS code and address a few of the debugging techniques as well.

Some of the tips are very basic but still could be useful for everyone. Also, AngularJS is a unique type of JavaScript framework that relies on a set of rules and best practices. However, many of these can be extremely helpful in building a state of the art AngularJS web applications.

Also, for your information, the main idea behind the inception of AngularJS was to bring focus to the declarative programming style. It supports functions that can interpret logic without the need to describe the control flow. It is useful for designing interfaces. However, with AngularJS, you can also follow the imperative programming style and define a control flow to implement business logic.

Must Read: 100+ AngularJS Interview Questions

AngularJS for Beginners – Essential Tips and Tricks

At the onset, you may find AngularJS easy to start but a large part of the code hides behind the abstraction layer that even experienced developers wouldn’t like to explore due to its sheer size and complexity. Hence, these tips would also focus on making you familiar with such concepts.

• Optimized code structure.
• Understand Scope In AngularJS.
• Restrain From Doing DOM Manipulation.
• Use Service To Share Data Between Controllers.
• Don’t Use Controllers For Presentation Logic.
• Use Track By For Quickly Displaying List Items.
• Adapt ControllerAs Approach.
• Integrate Less To Produce CSS.
• Use Built-In Validations In AngularJS.
• Avoid Filters With Large Arrays.
• How To Detect If Property Changes.
• How To Detect If An Item Changes In a List.
• Slow Down The Watchers From Being Called.
• Select An Element By ID Or Class.
• Use Multiple Controllers In Separate Modules.

1. Optimized code structure

As someone rightfully said, “Without a solid foundation, you’ll have trouble creating anything of value.“. As is the case with many of us who begin writing code to finish but don’t focus on maintainability. Hence, you must plan for everything starting from the folder structure for your code. Here is a sample code structure for an AngularJS project that you may follow.

• Create an “app” folder – the root of your project.
• Place all your shared data in the “app/common” folder.
• Put all your components files inside the “app/components” folder.
• All of your resources should go inside the “assets” folder.

Recommended code structure.

app/
----- app.module.js
----- app.routes.js
----- common/ // re-usable components
---------- controllers
---------- directives
---------- services
---------- html
----- components/ // every component is a mini Angular app.
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- cart/
--------------- cartController.js
--------------- cartService.js
--------------- cartView.html
assets/
----- img/ // media files for your app
----- css/ // styling files
----- js/ // script files written for your app
----- libs/ // third-party libraries e.g. jQuery, Underscore, etc.
index.html

2. Understand the Scope

The scope is something that binds the HTML with the JavaScript. It’s an object created by AngularJS to access the methods and properties of the controllers and directives. It includes a lot of handy information which is quite useful for debugging purposes.

• To access scope, first of all, you need to get to the target element. It is easily doable with the help of Chrome’s dev tools. Just inspect the web element and switch to the console tab.
• There you can type $($0) or angular. element($0) to print the element. Then can use $($0).scope() to get to the scope object.
• With the help of scope, you can know its whereabouts like its parents [$($0).scope().$parent] or parents of parents [$($0).scope().$parent.$parent] etc.
• If the selected element is a directive having an isolate scope, then use $($0).isolateScope() to determine its scope.
• Also, using the $($0).scope().<Property Name> will return the value of that property.
• If you wish to check if the scope includes a property or not, then use the $($0).scope().hasOwnProperty(‘<Property Name>’).

3. Restrain from doing DOM Manipulation.

You should not carry out any DOM Manipulations inside controllers, services, or anywhere else. However, you can have them working in the directives. Or the best is to avoid them as whenever there are any, else AngularJS will trigger events to maintain the application state. And It’ll lead to extra overhead for the application.

4. Use the Service to share data between controllers.

Sometimes, you have two or more views in different routes that need access to some status variable. Or you may have multiple components which need access to the same piece of data.

In such cases, the best approach to share data between controllers is by creating a dedicated service for this. See the below example.

Let’s say we’ve two controllers dc1 and dc2. And exchange is the name of our data service.

var myApp = angular.module("myApp", ['beginexchange']);
 
myApp.controller("dc1", ['$scope', 'exchange',
    function ($scope, SharedDataService) {
    $scope.Product = SharedDataService;
 
    }]);
 
myApp.controller("dc2", ['$scope', 'exchange',
    function ($scope, SharedDataService) {
    $scope.Product = SharedDataService;
 
}]);

Now, you can implement the view using the controllers in the following fashion.

<div ng-controller="dc1">
            <h2>In Controller 1</h2>
            <input type="text" ng-model="Product.name" /> <br/>
            <input type="text" ng-model="Product.price" />
            <h3>Product {{Product.name}} costs {{Product.price}}  </h3>
</div>
<br/>
<div ng-controller="dc2">
            <h2>In Controller 2</h2>
            <h3>Product {{Product.name}} costs {{Product.price}}  </h3>
</div>

5. Don’t use controllers for presentation logic.

The recommended development model in AngularJS is the MVC. It consists of a model, view, and controller. When you add presentation code in the controller, then you are breaking the integrity of the layers. Also, it could lead to unmanageable code. And it would become hard for other developers to debug. So, if you require a change in any HTML element or any DOM manipulation, then you should do it in the presentation layer.

6. Use Track By for quickly displaying list items.

You can control the frequency of rendering lists by using the Track By feature. Otherwise, displaying the list will require the DOM to reload for every item in the list.

See the below example.

<div ng-repeat="listitem in empList">
</div>

The above approach will make your code less efficient. Hence, you should be using the following code.

<div ng-repeat=" listitem in empList track by item.empid">
</div>

The code above still follows the same process. But it would display the list faster and make the application more efficient. As it is using the unique key instead of using a random one.

7. Adapt ControllerAs approach.

In spite of using the scope as a container, it’s better to use a controller as itself.

For your information, in controllers, it is no longer suggested to use the “$scope” variable. But we can assign everything to a controller object like this.text=” “. And in HTML templates, we should just set a name for our controller variable.

ng-controller=”MasterCtrl as ctrl"

It would work without any issue. However, there could be people who may oppose this approach but I think it is useful for developers who faced problems in following the scope-based approach.

You can use the controllerAs property inside the directive signature.

app.directive('Directive', function () {
    return {
      restrict: 'EA',
      templateUrl: 'temp.html',
      scope: true,
      controller: function () {},
      controllerAs: 'vm'
    }
});

Or also use it for controllers via $routeProvider in the following manner.

app.config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'hero.html',
    controllerAs: 'hero',
    controller: 'HeroCtrl'
  })
});

8. Integrate Less to produce CSS.

LESS, which is a CSS pre-processor and provides features like mixins, operators, and functions. Many developers recommend the use of Less for web development with AngularJS. While working with it, there are a lot of things that you can achieve.

• It offers high-level styling syntax to allow web developers to produce advanced CSS.
• LESS preprocessor compiles into standard CSS before the browser begins rendering a web page.
• Pre-compiled CSS files can be easily transferred to a production web server.

9. Use Built-in validations in AngularJS.

AngularJS embeds an excellent feature of auto-validating your form. Eventually, this ability can become the backbone of any application that receives user inputs.

Usually, the validation of a form goes through a chain of code blocks. They include multiple “if, else if…” which leads to undesired complexity. In this approach, the user has to submit the form a number of times to handle one validation error after the other.

However, AngularJS brings a different way of form validation which happens as the user fills it out. And all of these validations are inherent in Angular JS in the form of directives.

10. Avoid filters with large arrays.

Filters run on each digest loop and create a new array every time they execute. In such cases, prefer to watch your list and do filtering upon detecting a change.

See this example of a bad use of filters in a digest loop.

<li ng-repeat="item in heroList | myHeroSortFilter"></li>

Whereas, now see a good example.

In Controller.

$scope.filteredItems = $scope.items;
$scope.$watchCollection('items', function () {
    // Apply filter on change detection
    $scope.filteredItems = myHeroFilter($scope.items);
});

In HTML.

<li ng-repeat="item in heroList"></li>

11. How to detect if property changes.

Here is the sample code that monitors a property. It’ll print logs on the console.

var hero = {a: 2};

var _prop = obj.prop;

Object.defineProperty(prop, 'prop', {
 get: function () { return _prop; },
 set: function (val) { _prop = val; console.log('Property changed.'); }
});

12. How to detect if an item changes in a list.

There could be two ways to achieve it. First of all, let’s see the bad example. The downside is, it’ll create copies of the object with each comparison.

$scope.watch('empList',
    function watchListener() {
        // Print a message if the reporting of any employee changes.
    }
}, true);

Now, let’s see the approach that you should use.

$scope.watchCollection('empList',
    function watchListener() {
        // Print a message if the reporting of any employee changes.
    }
});

13. Slow down the watchers from being called.

For delaying the execution of watchers, we can use the “debounce” property.

<input type="text" name="empName"
ng-model="emp.name"
ng-model-options="{ debounce: 100 }" /><br />

The above code will change the model value only after waiting for 100 ms after the last change happened in the input value.

14. Select an element by ID or Class.

For selecting the element using ID, use the following code.

angular.element(document.querySelector('#id'))

For selecting the element based on the class name, use this code.

angular.element(elem.querySelector('.classname'))

15. Use multiple controllers in separate modules.

If you have multiple controllers in separate modules, then you can still use them inside a single module. However, you’ll need to include them as dependencies of your main module.

var dc1 = angular.module('dc1', []);
var dc2 = angular.module('dc2', []);
var app = angular.module('app', ['dc1', 'dc2']);

dc1.controller('dc1', function ($scope) {
    // Place your controller code here
});

dc2.controller('dc2', function ($scope) {
    // Place your controller code here
});

Summary – AngularJS Tips for Beginners.

The above tips can be a good foundation for your future applications. These will help you improve your skills and grow your knowledge in AngularJS. Also, you can improve productivity by turning your focus on the core business logic of your project.

Finally, we wish that you now have the required tools to start considering better approaches to designing state-of-the-art AngularJS applications.

Happy refactoring,
TechBeamers.