AngularJS Overview

Next: AngularJS Expressions

AngularJS is a very powerful JavaScript MVC Framework developed by Google. With AnguarJS we can quickly build an easily maintainable & testable frontend applications. AngularJS is ideal for Single Page Application (SPA) projects. AngularJS is open source, completely free, and well paid technology. ;P

AngularJS is a pure JavaScript framework. We can add it to html page using <script> tag.

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>

You can download latest version from angularjs.org. Also, CDN link will be avaiable there.

AngularJS magicly gives power to html

AngularJs extends html with ng-directives. It attaches new behavior to DOM elements, such as event handling. It supports for forms and form validations and allows to create reusable HTML components. Lets see in an example :-

See in Action

Enter the user name in input filed and see how things work.

Source Code

The final code we build in above example.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

In above example
1) The ng-app directive bootstraps the application and tells AngularJs that <html> is owner of application.
2) The ng-modal directive binds the input field value with scope variable. We will later read about scope mystery.
3) AngularJs Expression {{yourName}} binds the scope variable value into html page which means it simply prints the value.

You can read below to know AngularJS key features, components, concepts, advantages and disdvantages if you feel so. Else let’s move to next chapter to learn AngularJs Expressions.

*** AngularJS Features and Components ***


AngularJs is a complete client side solution. It handles all of the DOM muniplication with jQlite. It has DOM control structures for repeating, showing and hiding DOM fragments. It handles AJAX requests. It has a set of powerful features to build a client side application like basic templating directives, form validations, routing, deep-linking, reusable components and dependency injection.