Codingnode: AngularJS-The Introduction

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS is a JavaScript framework. It is a library written in JavaScript.It can be added to an HTML page with a script tag.

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

AngularJS adds behavior to your HTML and speeds up your application’s responsiveness.

It helps you to organize your JS and is perfect for SPAs (Single Page Applications).It is easy to test also.

How AngularJS works?

In a SPA, either all necessary code “HTML, JavaScript, and CSS are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process.Data is loaded into existing page in response to new request.

Architectural Pattern

View: Visual appearance (declarative languages).

Model: Data model of the app (JavaScript object).

Controller: Adds behavior (imperative language).

User interacts with the view changes the model, calls the Controller.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

as shown below diagram(download from the link http://angularjs.org and give the reference of AngularJS file)

AngularJS extends HTML with ng-directives.The ng-app directive defines an AngularJS application.The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.The ng-bind directive binds application data to the HTML view.

ng- tells that is an Angular directive. It’s a built-on directive. You can also write custom ones. You can get third party ones and things like that.

ng-app is used to initialize the AngularJS application.

Directives and Data Binding

A Directive is a marker on HTML tag that tells Angular to run or reference some JavaScript code

Expressions:

AngularJS expressions bind data to HTML.AngularJS expressions are written inside double braces: {{expression}}.AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.For example, we can see in the below diagram: