Module, Directives, Filter, Controller

An AngularJS module defines an application. The module is a container for the different parts of an application.
The module is a container for the application controllers. Controllers always belong to a module.
The module is created using angular.module, please see the example below

A module is created by using the AngularJS function angular.module
angular.module(“myAppMainModule”, []);

or

var app = angular.module(“myAppMainModule”, []);

Where [] contains the list of built-in angular services. We will learn about angular in later articles.

Defined module can be attached to HTML section using ng-app directive.

Example:

Angular JS provides a set of directives which help to achieve many functionalities easily in your application.
For example:
ng-app: directive initializes an AngularJS application.
ng-init: directive initializes application data.
ng-repeate: directive helps to repeat the data in the collection.

You can also add your own directives and use in your application.

AngularJS controllers control the data of AngularJS applications. AngularJS controllers are regular JavaScript Objects. AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller.

Example:

First Name:
Last Name:

Full Name: {{firstName + ” ” + lastName}}

var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName = “Izharuddin”;
$scope.lastName = “Shaikh”;
});

Filters can be added in AngularJS to format data. AngularJS provides filters to transform data:

currency: Format a number to a currency format.
date: Format a date to a specified format.
filter: Select a subset of items from an array.
json: Format an object to a JSON string.
limitTo: Limits an array/string, into a specified number of elements/characters.
lowercase: Format a string to lower case.
number: Format a number to a string.
orderBy: Orders an array by an expression.
uppercase: Format a string to upper case.

Example:

The name is {{ lastName | lowercase }}

Advertisements

#controller, #directives, #filter, #module