Why use AngularJS ?, A very short introduction...

adevedo's picture
0
No votes yet

As was defined on Wikipedia, AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.







In this article we introduce some samples on the framework that will be the best way to answer the question on "why use AngularJS"





Example #1: Data Binding

In this sample we demonstrate the concept of MVC used in AngularJS, Clicking the button will change the name 'Mahmoud' everywhere to 'Adevedo'







The demo code:

  1. <script>
  2.         function demo1Ctrl($scope) {
  3.                 $scope.theName = 'Mahmoud';
  4.                 $scope.changeName = function() {
  5.                         $scope.theName = 'Adevedo';
  6.                 }
  7.         }
  8. </script>
  9. <div ng-controller="demo1Ctrl">
  10.         <span>Your name is : <u><b>{{theName}}</b></u>, Again your name is : <u><b>{{theName}}</b></u></span>
  11.         <button ng-click="changeName()">Change Name to Adevedo</button>
  12. </div>




Example #2: Bind Input Value to Model Attribute Value

In this sample we demonstrate how to bind an input element to a model attribute, any change in the input value will reflect in the model attribute







The demo code:

  1. <span>Hello :&nbsp;<u><b>{{theName}}</b></u></span>&nbsp;&nbsp;<input type="text" ng-model="theName" placeholder="Enter a name here" />




Example #3: Bind HTML List To Model List Attribute (Array)

In this sample we demonstrate how to bind an HTML list element to a model list attribute, whenever an item added to the model list, the HTML list will reflect the added item







The demo code:

  1. <script>
  2.         function demo3Ctrl($scope) {
  3.                 $scope.theList = ['Mahmoud', 'Adevedo'];
  4.                 $scope.add = function() {
  5.                         $scope.theList.push($scope.newName);
  6.                         $scope.newName = "";
  7.                 }
  8.         }
  9. </script>
  10. <div ng-controller="demo3Ctrl">
  11.         <input type="text" ng-model="newName" /><button ng-click="add()">Add Name</button>
  12.         <ul>
  13.                 <li ng-repeat="name in theList"> {{ name }}</li>
  14.         </ul>
  15. </div>




Example #4: Show/Hide Condition

You can control the visibility state of the HTML elements using expressions binded to the Angular Model attributes







The demo code:

  1. <input type="number" ng-model="theNumber_demo4" /><label ng-show="theNumber_demo4 > 10">The Number now is greater than 10</label>




Example #5: IF Condition

The ng-if directive removes or recreates a portion of the DOM tree based on an {expression}







The demo code:

  1. <input type="number" ng-model="theNumber_demo5" />
  2. <label ng-if="theNumber_demo5 > 10">The Number now is greater than 10</label>
  3. <label ng-if="theNumber_demo5 <= 10">The Number now is less than or equals to 10</label>





At the End, If you love working with JavaScript and love the concepts of DOM Tree Manipulation, or If you have to capitalize on the client side in your web applications, then Angular is the answer for your "best framework to use" question...



Below are some collected images from the web that describe how AngularJS is working







Image #1





Image #2





Image #3





Image #4





Image #5

Add new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.
By submitting this form, you accept the Mollom privacy policy.