AngularJS - Introduction

  • AngularJS extends HTML with new attributes / ng-directives.
  • AngularJS is perfect for Single Page Applications (SPAs).
  • AngularJS is easy to learn.
  • AngularJS is a JavaScript framework.

  • AngularJS  can be added to an HTML page with a <script> tag.

  • AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.


AngularJS - Binding

AngularJS Binding is process of coupling Model and View elements. It is data synchronization between Model and View.

How it works:

  1. AngularJS will initialize when the DOM content is loaded.
  2. Looks for the ng-app directive – if its found, that is the root of the app
  3. Directives can be declared a variety of ways: typically with the ng- prefix (e.g. ng-controller)
  4. Load the module associated with the directive if specified
  5. When it knows with model to use for particular scope/code block it will start replacing all binding elements (e.g. curly braces, ng-bind

 

 


AngularJS - Modules

  • Organizational and reusable container for different parts of your apps.

  • Module for each feature.


AngularJS - Controllers

Business logic for views


AngularJS - Expressions

AngularJS binds application/module data to HTML using Expressions.


AngularJS - Directives

Extend HTML, used as widgets often