Sunday, August 6, 2017

Angular JS introduction

Angular Js is a client side java script framework. It means what ever the code we write as part of angular js development will be executed only by the browser.

Google started developing the angular js framework.

Goals:
  1. DOM Manipulation has to be separated from application logic.
  2. Separation of concern (Model-View-Controller).
  3. Single Page Application Development (Example: Facebook everything is rendered on a single page).
  4. A solid foundation for enterprise-scale JS client side applications.
  5. Extensibility and Customization.
To work with Angular js you can download the angular-version-x.js from angular.org or you can include below url into your page.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

Defining Angular Module: A module in angular js is huge umbrella which contains several application related components(Example controllers, models,etc..).

angular.module("app",[]);

The above code is trying to create a module with name "app". The first parameter refers to the name of the module and the second parameter refers to the will be the dependency injection.

Once angular js has been imported or referred in our application it will be searching for "ng-app".

<!doctype html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      Sum of 2+3 is {{2+3}}
    </div>
  </body>
</html>

Any kind of content you provide between two nested braces is called angular expression. Angular JS evaluates the content present inside two nested braces and displays the result. In the above case the result will be: Sum of 2+3 is 5