What to expect when working with Angular? Framework guide

Angular is a JavaScript framework used for developing web applications, it was created by Google in 2009 and is expanding ever since. Angular-based projects are related to Frontend development – in other words, developing in this framework is connected with client-side (web browser) activities. It was initially based on MVC (Model-View-Controller), but with every subsequent upgrade it resembles MVVM (Model-View View-Model) more and more.

Main assumptions of Angular:

• Separated application’s logic from manipulations in DOM (Document Object Model)

• Separated client’s side of the application from the server

• Testing is just as important as creation in the process application development

• Basic HTML functions are extended in a way that allows to maintain continuous synchronization between the view and the model

How it works?

Basic parts of Angular:

1. Controller
   Angular's module that is used for coding the business logic of the application. The data the controller uses is connected with a particular model. The controller is initiated by the directive ng-controller
2. Template
   HTML extended with custom directives is used in the template. We determine which variables should be connected to particular models
3. Service
   The service stores a code we’re planning to use more than once
4. Directive
   Created in order to extend basic HTML’ options, directives include all the DOM-based operations. They may be added to templates as attributes, classes or as separate elements. They determine DOM’s behavior
5. Scope
   Scope is the Angular object that contains model data. A single application can have multiple scopes. Controllers, directives and services download model’s data from scopes
6. View
   It’s all what user can see (DOM). When the Angular application is booted, the complier parses all templates into views
7. Module
   It’s a container for a fragment of the application. Few modules that Angular uses:
   
8. Controller
9. Service
10. Directive
11. The whole application
12. Injecting dependencies
    Thanks to the modularity of Angular it is possible to inject modules between themselves
13. Two-Way Data Binding
    The template is compiled into the view. Every change of the variable in the view results in the correspondent variable modification in the model and vice-versa

Basic directives in Angular:

1. ng-app
   This directive defines the parent tag of an application. The compiling begins with the element which has this command added
2. ng-bind
   This command defines that the value of a particular element is connected with the model whose name has ng-bind’ value
3. ng-if
   Defines the requirement of adding elements included in this command into DOM
4. ng-repeat
   The loop in the template, similar to a basic loop in programming
5. ng-class
   Define requirements of modifying the elements with a given class

How Angular makes work easier?

Angular allows for quick development of single -page-type applications:

• Developers doesn’t have to worry about updating the model data – Two-Way Data Binding makes it for them
• The modularity of the framework makes testing much easier. BDD approach isn’t a problem thanks to Jasmine and Karma. Do you prefer E2E (End-to-End) testing? Not a problem, use Protractor!
• Embedded directives allows you to do most basic tasks without the need of writing a long code
• Keeping the code in order and developing the application in accordance to the principle DRY (Don’t Repeat Yourself) is easy due to the architecture and modularity of Angular
• This framework is a perfect choice in case of applications based on a large portion of data coming from the user

Installing Angular

There are many ways of adding Angular into your project, but none of them will cause you any problems!

1. The first example is the method that relies on downloading Angular package and including it to the main HTML file with the script tag
2. The other method that I want to emphasize is based on Bower. The installation:
   
3. Install Bower globally
4. Install Angular in the project’s folder using Bower
5. Add downloaded Angular module in the main HTML file using the script tag
6. Instalation with the NPM (Node Package Manager):
   
7. Install NPM
8. Install Angular with the usage of NPM in your application directory
9. Add downloaded Angular module in the main HTML file using the script tag

Example use of Angular

• Printing out variable’s value from the controller

ExampleCtrl

app.controller('ExampleCtrl', ['$scope',
function($scope) {
$scope.person.name = 'Example'
}]);

Template

<div ng-controller=”ExampleCtrl”>
<p>{{person.name}}</p>
</div>

The p tag will show the value of the person variable declared in the ExampleCtrl controller.

• Updating the model via View

ExampleCtrl

app.controller('ExampleCtrl', ['$scope',
function($scope) {
$scope.person.name = 'Example'
}]);

Template

<div ng-controller=”ExampleCtrl”>
<input type=”text” ng-model=”person.name”>
<p>{{person.name}}</p>
</div>

The p tag will show the value assigned to the name object of the person variable, declared in the ExampleCtrl controller. This time the value will also be included in the input element. Additionally, every modification that occurs in the input element will be automatically visible in the p element and updated in the controller’s object.

Angular alternatives

There are a few Angular substitutes that are worth mentioning:

1. Backbone.js: similarly to Angular, Backbone is based on MVC and is used for creating Single Page applications. It is based on four basic classes:
   
2. Model: contains basic data of the application, it can be extended with additional functions (like initialize) executed every time when such model is created
3. Collection: models array
4. View: it’s DOM and models’ event listener. It presents the current state of the application to the user
5. Controller: used for creating state-based applications
6. Ember.js: just like frameworks mentioned before, it is based on MVC. Ember introduces such elements as:
   
7. Template: resembles the one from Angular, may include phrases such as: {{name}}, where the value of the variable is derived from a component or controller
8. Component: composed of two parts – the template and JavaScript code describing its behavior - is a part of user’s interface
9. Controller: works similarly to components. Future versions of Ember will probably replace it with components
10. Model: represents the selected state of the application

Comparison

FeatureAngularBackboneEmberObjects may be monitored for changesYesYesYesViews devided into partsYesNoYesAuto-refresh of observed variablesYesNoYesObjects filtered by specified criteriaYesNoYesTwo-way data bindingYesNoYes

Angular 2.0

Google announced the development of Angular 2.0 in October 2014. It breaks the rules of the previous version and introduces new assumptions:

• Mobiles are chosen as the scale of performance measurement - If the application will work on mobile devices, then there will be no problems on other devices whatsoever

• Some modules will be excluded from the new version, resulting in the better performance. The programmers will select only those modules that they need in the developed application

• Angular 2.0 focuses on modernity – developer is able to use EcmaScript6 (ES6)

Summary

Despite criticism which fell on Angular creators because of the vast amount of changes, I consider it to be a good framework which is pleasant to work with. It looks like the new version of Angular is going to be even better – with the elimination of the drawbacks of previous versions it will be used without worrying about the processing time. This framework is, of course, created for the specialized type of application and is not suitable for everything, so plugging it into your application must be carefully considered. We picked Angular while working on Touch&Go project - check out how it worked out!