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

Introduction to Angular JS

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Before we go in depth to understand what features Angular Js provide with respect to Single Page Application (SPA), let’s first understand the challenges we have with SPA.

The problems with SPA application includes DOM Manipulation, History, Routing, Ajax, Object Modeling, Data Binding, View Loading, Module Loading, Caching etc. With Angular, all the stuff already built in and there are various core libraries available to handle all these challenges.

Angular Js provides Two-way Data Binding, DOM manipulations can be done using jqLite or JQuery, In built routing, Templates, History tracking, Factories, Services, Validations, Controllers, Views, Directories and Dependency Injection.

#introduction-to-angular-js