AngularJS – Introduction

AngularJS is a JavaScript framework used to develop JavaScript based web-applications. Using AngularJS we can quickly develop and manage Single Page or Large Scale web-applications. It allows dynamic views in web applications. It is fully extensible and also flexible to work with other libraries.

Architecture it supports

AngularJS supports MVW Architecture; which is Model-View-Whatever Architecture. In the “Whatever” place, you can use either “Controller” or “ViewModel” or “Presenter”; that means, you can use MVC or MVVM, or MVP Architecture which suits your requirements when developing web-based Applications using AngularJS.

AngularJS enables Two-Way Data Binding; that means, if you update anything in the Model, will reflect in the View and vice-versa.

AngularJS extends the HTML using its’ Directives and binds data to HTML by using its’ Expressions.

Components of AngularJS

AngularJS has a number of components to make it easy to develop and manage web-based Applications. Some of them I will describe here; but will give more details, in my upcoming Articles.

Directives

Directives are the key components in AngularJS, allowing to the extension of HTML functionality and enabling dynamic behavior. Directives start with the prefix “ng-“; where ng means Angular.

ng-app is the directive to define a root element to enable to initialization AngularJS application. The entire section where this directive is defined is managed by AngularJS.

ng-init directive is used to initialize application data.

ng-model directive is very useful to bind the data to HTML elements.

Expressions

Expressions in AngularJS are used to bind data to HTML elements. These can be written either in double curly braces OR inside a directive.

For example, below is the way we write Expressions in AngularJS: expressions are evaluated and show the results at run-time.

{{ expression }}

OR

ng-bind="expression"

Services

Services are Java Scripts functions or objects used to perform particular tasks. Services are easy to maintain and testable. AngularJS provides many built-in services.

The most commonly used service is $http service; which makes a request to the server and allows your application to handle the response.

Scopes

Special JavaScript object which enables to bind controller (JavaScript) with the view (HTML). With the $scope object we can get available properties and methods; which are defined in the specific scope. All applications have a $rootScope object which is available in the entire Application.

Controllers

Controllers control the data in AngularJS applications. By using ng-controller directive, we can define an application controller. The controllers are invoked with $scope object.

This is a quick introduction to AngularJS. We discuss more AngularJS in future Articles.

</> Michael