Tuesday, April 21, 2015

Angularjs enter input field and display that field value

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="">

<div>

<p> Enter Name : <input type="text" ng-model="name"/> </p>

<p> Name : <span ng-bind="name"/> </p>

</div>

</body>
</html>

Angularjs app understanding

Include AngularJS

We include the AngularJS JavaScript file in the HTML page so that we can use it:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>

Point to AngularJS app

Next, it is required to tell which part of HTML contains the AngularJS app. You can do this by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:

<body ng-app="myapp">


</body>

View

The view is this part:

<div ng-controller="HelloController">

<h2>Welcome {{ helloTo.Title }} to the world of tutorial point</h2>

</div>

ng-controller tells AngularJS which controller to use with this view. helloTo.title tells AngularJS to write the model value named helloTo.title in HTML at this location.

Controller 

<script>

angular.module("myapp",[])
   .controller("HelloController",function($scope)
   {
   $scope.helloTo=[];
   $scope.helloTo.Title="AngularJS";
  
   });

</script>

AngularJS First App

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">

<div ng-controller="HelloController">

<h2>Welcome {{ helloTo.Title }} to the world of tutorial point</h2>

</div>

<script>

angular.module("myapp",[])
  .controller("HelloController",function($scope)
  {
  $scope.helloTo=[];
  $scope.helloTo.Title="AngularJS";
 
  });

</script>

</body>
</html>

AngularJS Directives

The AngularJS framework can be divided into three major parts:

 ng-app : This directive defines and links an AngularJS application to HTML.

 ng-model : This directive binds the values of AngularJS application data to HTML input controls.

 ng-bind : This directive binds the AngularJS application data to HTML tags.

Disadvantages of AngulaJS

Though AngularJS comes with a lot of merits, here are some points of concern:

 Not Secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

 Not degradable: If the user of your application disables JavaScript, then nothing would be visible, except the basic page. 

Advantages of AngularJS

The advantages of AngularJS are:

 AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
 AngularJS provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of separation of concerns.
 AngularJS provides reusable components.
 With AngularJS, the developers can achieve more functionality with short code.
 In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
Angular JS Tutorial 4 On the top of everything, AngularJS applications can run on all major browsers and smart phones, including Android and iOS based phones/tablets.

Jquery getJson method Example

Example

Assuming we have following JSON content in result.json file −
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
Following is a simple example a simple showing the usage of this method −
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $.getJSON('result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
            });
         });
      </script>
  
   </head>
 
   <body>
 
      <p>Click on the button to load result.html file:</p>
  
      <div id="stage" style="background-color:#cc0;">
         STAGE
      </div>
  
      <input type="button" id="driver" value="Load Data" />
  
   </body>
 
</html>