What is AngularJS?
AngularJS is a JavaScript-based MV* framework that provides a strong backbone to scalable and complex web apps. It also enables developers to extend HTML and program their apps in a declarative paradigm in lieu of an imperative programming style. AngularJS provides us with a way of creating reusable components, setting standard templates in HTML, and reusable business logic with the ability to bind data dynamically to it.
AngularJS is a perfect fit for creating rich Mobile UI Apps as it provides a robust structure to the frontend, which is a reason why the Ionic team has chosen it as their core.
Important concepts in AngularJS
In order to build apps using AngularJS we need to understand the core concepts used in AngularJS and learn how to use them. The prerequisite for learning AngularJS is decent knowledge of HTML, CSS, and JavaScript. The core concepts that will be discussed include modules, directives, controllers, expressions, and filters.
Modules
In AngularJS, modules are at the core of everything because an AngularJS App is defined as a module itself. A module is a container for different sections of the app such as controllers, directives, services, and so on. A module can have other module dependencies injected at run time. This feature of AngularJS is called DI (Dependency Injection). It provides super flexibility for unit testing as dependencies can be mocked and injected.
Each module has two important lifecycle hooks implemented as methods registering callbacks. The methods are config and run. The
config method is used to set up or provide important configuration settings such as routes, states, and so on, whereas the run function is used like the main method for initiating the module inside the callback registered:
Directives
Directives are the most important and yet the most complex part of AngularJS. They can be easily described as a set of markers on DOM elements such as element name, CSS class, an attribute, or a comment, which lets the AngularJS compiler know that specified behavior needs to be attached there. It is advised to encapsulate any DOM manipulation logic into a directive while developing an AngularJS App.
There are plenty of in-built core directives that are part of the ng-module and used in each angular app. We will discuss the essential ones in order to understand the functioning of a directive.
ng-app is the core directive that bootstraps our app. The root angular module name needs to be passed to this directive and is generally used as an attribute, for example:
<html ng-app="my-app">
ng-model is a directive used for binding models from controllers to the views. We will learn about the scope in the text ahead, which is used to hold the models as Plain Old JavaScript Objects. ng-model is used with input, select, and text area controls, for example:
<input type='text' name='textField' ng-model="my-var">
There are many other directives such as ng-class, ng-show, ng-hide, and so on, which you will use while developing your app. Ionic Framework has built most of its components as custom directives and will be used frequently to develop Hybrid Apps using the framework.
Controllers
In AngularJS, a controller is a constructor function used to augment the view models. The controller can be initiated in two ways, either using the directive ng-controller or it can be associated with a route/state. According to Angular docs, controllers should be used for setting up the initial state of the $scope (view model) object and adding behavior to it.
We should refrain from using it for the following logic:
- DOM manipulations
- Formatting input
- Input validations
- Sharing of data should be done using services
The example code for a basic controller is:
var newApp = angular.module('NewApp',[]);
newApp.controller('FirstController',['$scope',function($scope) {
$scope.modelObj = { name:'MyDummyObject' };
$scope.updateName = function(newName) {
$scope.modelObj.name = newName;
}
});Note
We define the dependency injection twice, first as a string and then as an argument to avoid problems during the minification of your JS files. Read more details at https://docs.angularjs.org/guide/di.
Services
In AngularJS, services are used to store business logic and organize your code into logical units or entities. Angular services are lazily loaded and are wired together using Dependency Injection, as discussed earlier. AngularJS services are singletons and thus instantiated only the first time they are encountered as a dependency to any controller or module.
AngularJS has multiple built-in services out of which $http is the most important one. The $http service provides a wrapper on the browser's XMLHTTPRequest object, or more popularly known as Ajax requests.
We can create AngularJS services using two module factory methods. The methods used are .service or .factory. The former is used when we create the service instance using a constructor function, and the latter is used when a factory function returns the instance of the service. Conceptually, we should use .service when we are integrating to any external API and use .factory if we are creating objects representing app models.
The code sample to create services using both methods is given as follows:
// Using Factory Method
var newApp = angular.module('NewApp',[]);
newApp.factory('MyService',[function() {
var serviceInstance = {};
var privateMethod = function() { return 'result'; };
serviceInstance.exposedMethod = function() {
return privateMethod();
};
return serviceInstance;
});In the given code, a factory function available on the angular.module object is used to return a service instance that contains public methods. The service can encapsulate private methods to include logic that should not be exposed:
// Using Service Method
var newApp = angular.module('NewApp',[]);
newApp.service('MyService',[function() {
var privateMethod = function() { return 'result'; };
this.exposedMethod = function() {
return privateMethod();
};
});Services in Angular can be used in the following ways:
- Representing business entities/models
- Sharing data across controllers
- Interface to external web service calls or Ajax requests
Templates
In AngularJS, templates are associated with a route/state to display HTML elements and Angular-specific elements. Template code can be directly passed in JS or TemplateURL, for example, URL to the template file can be passed to any object. Angular combines the template to the controller and models to display dynamic content to the user on the browser. $scope is used to bind the controller to the template.
Templates can use Angular directives and expressions that are compiled by the $compile service. The following code shows a simple Angular template:
<html ng-app>
<head>
<title>My First Angular Template</title>
</head>
<body>
<h1>Main Section</h1>
<div ng-controller='MyCtrl'>
<p>{{ contentStr }}</p>
<p>Date : {{ dateStr | dateFormat }}</p>
</div>
Name: <input type='text' ng-model='name'>
</body>
</html>Expressions
Expressions are code snippets put in AngularJS templates to create bindings between controllers and templates. The expressions are, by default, represented by {{ }} in the templates. Angular expressions are different from JavaScript expressions as they have some restrictions. They can contain basic arithmetic or concatenation operations, but no control flow statement or function declarations. Angular expressions run against the context of the scope, for example, variables in the bindings are evaluated on the scope object for each respective controller.
Filters
Filters are used in expressions to format data before displaying it. Filters are applied using the | operator. There are in-built filters such as currency, number, date, lowercase, and so on.
Example of expressions with a filter in a template:
<p> Total : {{ amount * 32 | currency }} </p>
amount is a scope model, using the * arithmetic operator and the currency filter.
