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.
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:
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
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
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.
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.
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.
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.
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.