• 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 - 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)
  6. Uses Constructor Injection to pass dependences and decide order of initialization

AnuglarJS Modularize client side code primarily into Model, View and Controller (MVC). Making is easy to serarate areas of concern and make code more managable.

 

https://docs.angularjs.org/img/guide/concepts-databinding2.png

Image Reference : https://docs.angularjs.org/img/guide/concepts-databinding2.png

AngularJS breaks code into lots of different parts:

 

 


AngularJS - Hello World Application

It is good start to learn a programming language with first example as Hello World. Lets take a look in AngulaJS way-

.


AngularJS - Extends HTML

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, text-area) to application data.
  • The ng-bind directive
    • Binds application data to the HTML view.
  • The ng-init directive
    • Initializes AngularJS application variables.

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.