Google News
logo
AngularJS Ajax
CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals.

1. CSS is used to design HTML tags.
2. CSS is a widely used language on the web.
3. HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags.

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.

CSS is categorised into three types : 

1) Class base css
2) Tag base css
3) ID base css

Class Base : The css used to redefine the elements of html is called as  class base css.It is denoted by dot(.) before the name. The class based css file is using to multiple times of single document.
 ex: (  .sample{color:#000;}  )

Tag Base : The css used to apply for tag of html is called as tag base css. Tag base css is denoted with tags(body,img, ul, li,p,table,h1 to h6..etc)

ID Base : The css used to create block elements is called as ID base css. Alternative for creating table(cell) without html.It is denoted by  (#)before the name. The ID based css file is using to single time of single document.
ex: #header,#banner etc.

Note: Start one value afetr ending this semicolon(;).

Css can be applied in three ways:

1) Internal css
2) External css
3) Inline css

Internal css : The css which is written internally within the html document in the head tag is called Internal css.

External css : The css which is written externally and it is linked within head tag is called External css.

Inline css : The css which is written in the tags in the body of html documents is called Inline css.


	
function educationController($scope,$http) {
    var url = "data.txt";
 
    $http.get(url).then( function(response) {
        $scope.education = response.data;
    });
}

Here, the file data.txt contains education records. $http: service makes an AJAX call and sets response to its property education. education model can be used to draw tables in HTML.

Here the file data.txt contains the book's record.
data.txt (Book's data in JSON format)
[
   {
      "Name" : "HTML",
      "Programs" : 36,
      "Completed" : "65%"
   },
 
   {
      "Name" : "CSS",
      "Programs" : 45,
      "Completed" : "59%"
   },
 
   {
      "Name" : "JavaScript",
      "Programs" : 57,
      "Completed" : "72%"
   },
 
   {
      "Name" : "Bootstrap",
      "Programs" : 63,
      "Completed" : "81%"
   },
   
   {
      "Name" : "JQuery",
      "Programs" : 79,
      "Completed" : "86%"
   }
]
AngularJS Ajax Example (angularjs-ajsx.php)
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS AJAX</title>
 
<style type="text/css">
 table, th , td {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
border: 1px solid #0099da;
border-collapse: collapse;
padding: 7px 20px 7px 7px;
 }
 
 table tr:nth-child(odd) {
background-color: #EEE;
 }
 
 table tr:nth-child(even) {
background-color: #F69F9F9;
 }
</style>
      
</head>
<body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "" ng-controller = "educationController">
      
         <table>
            <tr>
               <th>Name</th>
               <th>Programs</th>
               <th>Completed</th>
            </tr>
         
            <tr ng-repeat = "education in educations">
               <td>{{ education.Name }}</td>
               <td>{{ education.Programs }}</td>
               <td>{{ education.Completed }}</td>
            </tr>
         </table>
      </div>
      
      <script>
         function educationController($scope,$http) {
            var url = "data.txt";
 
            $http.get(url).then( function(response) {
               $scope.educations = response.data;
            });
         }
      </script>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
      
   </body>
</html>
Output :

To execute this example, you need to deploy angularjs-ajsx.php and data.txt file to a web server. Open the file angularjs-ajsx.php using the URL of your server in a web browser and see the result.

AngularJS $http and Methods
The AngularJS $http service makes a request to the server, and returns a response. There are several shortcut methods of calling the $http service. In the above example, .get method of the $http service is used.
  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()
Properties

The response from the server is an object with these properties :

  • .config the object used to generate the request.
  • .data a string, or an object, carrying the response from the server.
  • .headers a function to use to get header information.
  • .status a number defining the HTTP status.
  • .statusText a string defining the HTTP status.