Tuesday, January 30, 2018

How to write a program for DOM in angularJS.

  • The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.
  • The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.
  • If the value of mySwitch evaluates to true, the button will be disabled


Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch"> click me
</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"> Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>

Output



Hpw to write a program for location service in angularJS.

  • In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
  • AngularJS has about 30 built-in services. One of them is the location service. 


Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="ABC" ng-controller="DEF">
<h1>
{{myUrl}}
</h1>
</div>
<script>
var app=angular.module('ABC',[]);
app.controller('DEF',function($scope,$location)
{
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

Output


How to write a program for select box in angularJS.

  • If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive:

Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="Abc" ng-controller="def">
<select>
<option ng-repeat="x in names"> {{x}}
</option>
</select>
</div>
<script>
var app = angular.module('Abc', []);
app.controller('def', function($scope)
{
    $scope.names = ["JavaScript", "PHP", "JAVA"];
});
</script>
</body>
</html>

Output




How to write a program for different http methods in angularJS

The example above uses the .get method of the $http service.
The .get method is a shortcut method of the $http service. There are several shortcut methods:
  1. .delete()
  2. .get()
  3. .head()
  4. .jsonp()
  5. .patch()
  6. .post()
  7. .put()
Program


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
  </script>
</head>
  <body>
     <div ng-app="ABC" ng-controller="DEF">
      <p>
       {{myWelcome}}
      </p>
     </div>
<script>
      var app = angular.module('ABC', []);
      app.controller('DEF', function($scope, $http)
       {
       $http
          ({ 
              method : "GET",
              url : "http://localhost/Rushi/Core%20JS/appajs.html"
            })
                .then(function mySuccess(response) 
               {
                  $scope.myWelcome = response.data;
              },
         function myError(response) 
         {
            $scope.myWelcome = response.statusText;
         });
      });
</script>
  </body>
</html>

Output


How to write a program for JSON in angularJS.

  • The data you get from the response is expected to be in JSON format.
  • JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript.

Program

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl"> 
<table border="1">
  <tr ng-repeat="x in myData">
    <td> {{ x.Name }}
    </td>
    <td> {{ x.Country }}
    </td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) 
{
  $http.get("https://www.w3schools.com/angular/customers.php").then(function (response) 
  {
    $scope.myData = response.data.records;
  });
});
</script>
</body>
</html>

Output



How to write a program for diffrent http Properties in angularJS.

  • 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.
Program

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
</head>
<body>
    <div ng-app="abc" ng-controller="def">
    <p> data {{ content }}</p>
    <p> status {{ statuscode }}</p>
    <p> text {{ statustext}}</p>
    </div>
<script>
    var app = angular.module('abc', []);
    app.controller('def', function($scope, $http)
    {
      $http.get("appajs.html").then(function(response)
        {
          $scope.content = response.data;
          $scope.statuscode = response.status;
          $scope.statustext = response.statusText;          
        });
    });
</script>
</body>

</html>

Output



write a program for interval service in angularJS.

The Interval service is AngularJS version of the window.setInterval function.

Program

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="abc" ng-controller="def"> 
<h1>{{theTime}}</h1>
</div>
<script>
var app = angular.module('abc', []);
app.controller('def', function($scope, $interval)
{
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () 
  {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>
</body>
</html>

Output



write a program for The http Service in angularJS.

The http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.
Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="ABC" ng-controller="DEF">
<p>
{{myWelcome}}
</p>
</div>
<script>
var app=angular.module('ABC',[]);
app.controller('DEF', function ($scope,$http)
{
$http.get("angular.html").then(function (response)
{
$scope.myWelcome=response.data;
});
});
</script>
</body>
</html>

Output


Write a program for a filter Filter in angularJS.

  • The filter Filter selects a subset of an array.
  • The filter Filter can only be used on arrays, and it returns an array containing only the matching items.

Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="ABC" ng-controller="DEF">
<ul>
<li ng-repeat="x in  name | filter : 'e'">
{{x}}
</li>
</ul>
</div>
<script>
angular.module("ABC",[]) .controller("DEF",function ($scope)
{
$scope.name=['dave','patel','dabhi','panchal','joe','doge'];
});
</script>
</body>
</html>

Output


Write a program for filter in angularJS.

  • Filters can be added in AngularJS to format data.
  • The currency filter formats a number as currency:
Program

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="Abc" ng-controller="def">
<h1> price:{{ price | currency}}</h1>
</div>
<script>
var app=angular.module('Abc',[]);
app.controller('def', function ($scope)
{
$scope.price=60;
});
</script>
</body>
</html>

Output