Mavengers

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>

Jquery getJson method syntax

Description

The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request.

The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method −

$.getJSON( url, [data], [callback] )




Parameters

Here is the description of all the parameters used by this method −


url − A string containing the URL to which the request is sent


data: − This optional parameter represents key/value pairs that will be sent to the server.


callback: − This optional parameter represents a function to be executed whenever the data is loaded successfully.

jquery get json data from json array with for loop

var data = {

"users": [

{
"firstName": "Ray",

"lastName": "Villalobos",

"joined": {

"month": "January",

"day": 12,

"year": 2012

}

},

{
"firstName": "John",

"lastName": "Jones",

"joined": {

"month": "April",

"day": 28,

"year": 2010

}

}

]

};
for (var i in data.users) {

alert(data.users[i].firstName + " " + data.users[i].lastName + " " + data.users[i].joined.month);

}

jquery get json data by id

var data = {

"users": [

{

"firstName": "Ray",

"lastName": "Villalobos",

"joined": 2012

},

{

"firstName": "John",

"lastName": "Jones",

"joined": 2010

}

]

}

alert(data.users[1].firstName + " " + data.users[1].lastName + " " + data.users[1].joined);