AngularJS – A Javascript MVC Framework


What is AngularJS?

AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintainable web applications. It extends HTML into a more expressive and readable format. It decreases emphasis on directly handling DOM manipulation from the application logic, allowing for easier testing. It employs efficient two-way data binding and sensible MVC implementation, reducing the server load of applications.

Why AngularJS?

AngularJS is a MVC framework that enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It allows to declare dynamic views in web-applications. It also lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Now let’s have a closer look at all those features.

1. Expressions

Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expressions are processed by the $parse service.

For example, these are all valid expressions in angular:

2+2
7*10 | currency
user.name

2. Directives

Directives adds new tricks to HTML. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Angular comes with a built in set of directives which are useful for building web applications but can be extended such that HTML can be turned into a declarative domain specific language (DSL).

Jsfiddle Example

3. Data Binding

Data-binding in Angular web apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

ngModel Is a directive that tells Angular to do two-way data binding. It works together with input, select, textarea and even custom form controls that use NgModelController exposed by this directive.

4. Filters

In order to change the way your data are displayed in your page, AngularJS provides you with the filter mechanism.

e.g we can put the name in upper case with {{user.name | uppercase}} filter

You can also easily create your own filters.

5. Modules

In AngularJS, applications are structured in modules. A module can depend on other modules and a module can contain controllers, services, directives and filters.

jsfiddle Example

6. Scopes

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

7. Controller

Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.

Related Videos

Advertisements

One thought on “AngularJS – A Javascript MVC Framework

  1. Pingback: Bootbox.js – Alert, Confirm, Prompt and Dialogs for Bootstrap framework | A Programming Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s