• 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 - What and Why?

What is AngularJS?

  • AngularJS is front-end javascript framework
  • Used to create dynamic web pages
  • Follows MVC pattern of development
  • Its open source framework maintained by Google
  • Uses declarative programming
  • Does all sorts of client side operations like DOM manipulation, registaring callbacks, Updating UI based on data, input and filters

Why we need AngularJS?

AngularJS allows to do  client side code to be modularized, reusable and remove d

  • Creating dynamic UI
  • Decouple client side from server side 
  • Modularize application at client side
  • Writing resuable code
  • Manupulating DOM dynamically
  • Do more work in less code
  • Peforming CRUID operation from UI
  • Exellent for creating responsive websites
  • Easy to test

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.



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.