Angular JS

-
Angular JS

Angular JS is a Jawa script framework that extend HTML with new attributes. Angular JS is perfect for single phase applications. To mark an HTML element as a container for an angular JS application, write the attribute NG-app.

For example
<div ng-app=""> Angular JS can be added to an HTML page with a <script> tags. Angular JS has attributes called directives. The ng-model directive binds the value of HTML input control to application data. The ng-bind directive binds application data to the HTML.

Angular JS is a MVVM (Model View View Model) framework because it binds MOdel to teh VIew and View to the model using ng-model and ng-bind

  
 <div ng-app="gaurav">
 <p> Name:
 <input type="text" ng-model="name" />
  </p>
  <p ng-bind="name"></p>
  </div>


  <div ng-app="shirodkar" ng-init="firstName='John'">
    <p> The name is <span ng-bind="firstName"></span></p>
  </div>

Anugular JS expresions are written inside curly braces {{ expression }}.
Angular JS will "output" data exactly where the application is written. 


 <div ng-app="Gaurav">
  <p>My first expression is: {{ 5 + 5 }}</p>
  </div>


  <div ng-app="">
    <p>Name:
    <input type="text" ng-model="name" />
      </p>
  <p>{{ name }} </p>
  </div>

Angular JS controllers provide the functionality whenever a event occurs.
Events may be anything like storing data, clicking of a button, updating $scopen object, listening to a url with or without query parameters, making AJAX calls and so on.


  <div ng-app="Gaurav">
  <'div ng-controller="gaurav-controller">
    </div>
  </div>


  let app = angular.module("Gaurav",[]);
  app.controller("gaurav-controller",
                 function($scope) {
    				$scope.firstName = "Gaurav";
    				$scope.lastName  = "Shirodkar";
    
  }
);

Inserting expressions in HTML 


  <div ng-app="" ng-init="myCol='lightblue'">
  <input type="text" style="background-color:{{myCol}}" ng-model="myCol" />
   </div>

Angular JS numbers are like Java Script numbers


  <div ng-app="" ng-init="quantity=10;cost=5;">
  <p>Total in dollar: {{ quantity * cost }} 
  </p>
  </div>

Same example using ng-bind


  <div ng-app="" ng-init="quantity=10;cost=5">
    <p>Total in dollar: <span ng-bind='quantity * cost"></span></p>
  </div>

AngularJS strings 


  <div ng-app="" ng-init="firstName='Gaurav';lastName='Shirodkar''>
  <p> The full name is {{ firstName + " " + lastName }}</p>
  </div>

Same example using ng-bind:


  <div ng-app="" ng-init="firstName='Gaurav';lastName='Shirodkar'">
  <p>The name is <span ng-bind="firstName + ' ' + lastName"></span>
  </div>

ANgular JS objects are like JAvascript objects. 


  <div ng-app="" ng-init="person={firstName='Gaurav',lastname='Shirodkar'}">
  <p>The name is {{ person.lastName }}</p>



<div ng-app="" ng-init="quantity=1;price=5">
  Quantity: <input type="number" ng-model="quantity" />
  Costs: <input type="text" ng-model="price: />
    Total: {{ quantity * price }}

Repeating HTML elements: The ng-repeat directive repeats ann HTNLM element.

Example:
        
    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>

The ng-repeat directibve actually clones HTML elements oonce for each item in a collection. Thge ng-repeat used on an array of objects.

Example:

<div ng-app="" ng-init="name = { name : 'Jani', country : 'Norway'}">
{{ name: 'Hehe' country: 'Sweden'}},
{{name: 'KAi' , country: 'Denmark' }}

Two way binding:

The binding goes both ways: If the user changes trhe value inside the input field, the angularJS property will also change its value

Validate user input:

The ng-model directive can provide type validation for application data (number ,email,required);

CSS classes:

The ng-model directive provides CSS classes for HTML elements, depending on their states. The ng-model directive adds / removes the following classes, acording to the status ofthe form filled:
  • ng-empty
  • ng-notempty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine
                                                            
<div ng-app="myApp" ng-controller="myCtrl">
	<h1 ng-click="changeName()">
	{{ firstName }}
    </h1>       
</div>
<div>
  <script>
      var app = angular.module("myApp",[]);
      app.controller("myCtrl", function($scope) {
      $scope.firstName = "John";
      $scope.changeName = function() {
          $scope.firstName = "Nege";
          }
      }
      );
  </script>
</div>

Comments

Post a Comment

Popular posts from this blog

Parallel Database design, query processing

-
Image
Parallel Database design, query processing, and case study In this post, we are going to analyze the concepts of Parallel Database design, query processing, and case study. Parallel database design Hardware Architecture Data partitioning Query processing Hardware Architecture Shared Memory Shared Disk> Shared Nothing Data Partitioning Partitioning a relation involves distributing its tuples over several disks Three Kinds – Range Partitioning Round-robin Partitioning Hashing Partitioning Range Partitioning is good for Ideal for point and range queries on the partitioning attribute Hash partitioning Ideal for point queries based on the partitioning attribute Ideal for sequential sca...
Read more

Laravel | PHP | Basics | Part 2

-
Image
Learning Laravel through Screenshots Caching Laravel by default supports multiple cache stores like memcached , redis ,etc. To install redis as a cache store, you should use composer install predis/predis predis stands for PHP redis The default port number is 6379 Every Cache store requires a prefix which is stored in the ENV file or in the config/cache.php Following are the cache stores supported by laravel Blade Templates Blade is a templating engine for views in laravel. All the files which are of type blade.php are having the extension .blade.php They are stored in the resources/views directory YOu can create suub-folders in the reosurces/views directory like layouts for all the common UI components lke header , footer, sidebar , navbar, menubar, serach bar, etc. To include the parenet ...
Read more

Apache Hadoop | Running MapReduce Jobs

-
Image
Apache Hadoop | Running MapReduce Jobs After setting up your environment and running the HDFS and YARN daemons, we can start working on running MapReduce jobs on our local machine. We need to compile our code, produce a JAR file, move our inputs, and run a MapReduce job on Hadoop. Step 1 - Configure extra environment variables As a preface, it is best to setup some extra environment variables to make running jobs from the CLI quicker and easier. You can name these environment variables anything you want, but we will name them HADOOP_CP and HDFS_LOC to not potentially conlict with other environment variables. Open the Start Menu and type in 'environment' and press enter. A new window with System Properties should open up. Click the Environment Variables button near the bottom right. HADOOP_CP environment variable This is used to compile your Java files. The backticks (eg. `some command here`) do not work on Win...
Read more