• Rahul Prabhune

AngularJS 1.x core concepts

Updated: Dec 9, 2017



AngularJS is an opinionated MV* framework which provides lot of built-in features to enable developers built applications rapidly. Two way data binding, dependency injection and routing mechanism to create SPA (Single Page Application) has made angular popular among front-end web developers.

Data Binding

Angular offers an awesome feature known as two way data binding which greatly simplifies our lives. Data binding means that when we change something in the view, the scope model automatically updates. Similarly, whenever the scope model changes, the view updates itself with the new value. For example, a HTML textbox’s value when changed by end user, will automatically update the scope model (controller). This saves us lot of plumbing that we traditionally did in JavaScript to get this done.


Module

Module is a container for different parts of our application – controllers, services, filters, directives, etc. We can have multiple modules in a large application and they all can work with each other using built-in angular’s dependency injection. To make angular lightweight, angular team has divided its features like ngRoute, ngAnimate into different modules and we can inject them in our application’s module as needed. Here is how module in our application is defined

Define the name of the module in view/page


Controller & Scope

$scope – an angular service is responsible for two way data binding between the controller and the view. Here is syntax to perform auto sync between controller and view In Controller:

In View

We can define multiple controllers in our module where every controller is identified by its name and we can use that controller to expose data in multiple views/pages. This is how controller is defined:

and this is how controller is scoped in the view/page to expose its data


Service

We could put all of our business and data retrieval logic inside this controller, but that becomes difficult to manage as your system grows and it violates the single responsibility principle. So we have this concept of service which is just a worker object that performs some sort of business logic. It is an object that has methods and properties that we can reuse. Angular ships with a whole host of built-in services like $http to perform REST calls and $q for implementing promise to avoid spaghetti code for asynchronous calls and $scope to bind view and model. It also allows you to break your application down into pieces that are easier to maintain. Finally, using services makes it easier to test our code because we can isolate our tests to just the pieces of code that you're trying to test. This is how we define service:

and this is how we call service inside controller


Directives

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.


Dependency Injection

Angular behaves like a fully-featured dependency injection container, which makes it easy for it to get access to the services and modules that you need when you need them. Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.


Unit Tests

If we are building a large application with a decent size team, unit testing – angular’s built-in feature is very handy. Angular team has created a framework called Jasmine to write and run unit tests, which can be used for any JavaScript code and not just angular. Angular provides ngMock module which makes angular testable and also works with Jasmine.


Filters

Filters are used to manipulate data or change the format of the data. Angular provides built-in filters but we can create custom filters too. If our filter is not going to be reusable and is dedicated for specific case, then we can filter data in controller or service instead of create a filter. Here is an example of build-in angular filter.


Routing

Let’s start with an example of Gmail which is a SPA build on angular where we navigate between different views without page refresh. AngularJS provides this built-in feature where we inject ngRoute angular module inside our application’s module and configure the routing mechanism using $routeProvider service for each view.


Animation

By default to work with animations we need decent knowledge on CSS3 Transitions. Angular provides animation hooks for common directives such as ngRepeat, ngClass, and ngShow/ngHide, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition.