Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, January 30, 2018

How to program for a routing in angularJS.

   ,  No comments

  • If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
  • In the previous examples we have used the When method of the $routeProvider.
  • You can also use the otherwise method, which is the default route when none of the others get a match.

Program

 <!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js">
    </script>
<body ng-app="myApp">
    <p>
         <a href="#/!">Main</a>
     </p>
        <a href="#!banana">Banana</a>
        <a href="#!tomato">Tomato</a>
    <p>
        Click on the links to change the content.
    </p>
     <p>
         Use the "otherwise" method to define what to display when none of the links are clicked.
     </p>
    <div ng-view>
    </div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
    $routeProvider
    .when("/banana",
        {
          template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
        })
        .when("/tomato",
         {
              template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
         })
            .otherwise
            ({
                template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
            });
});
</script>
</body>
</html>

Output



How to write a program for an animations in angularJS.

   ,  1 comment
  • The ngAnimate module adds and removes classes.
  • The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations.

The directives in AngularJS who add/remove classes are:
  1. ng-show
  2. ng-hide
  3. ng-class
  4. ng-view
  5. ng-include
  6. ng-repeat
  7. ng-if
  8. ng-switch
  • The ng-show and ng-hide directives adds or removes a ng-hide class value.
  • The other directives adds a ng-enter class value when they enter the DOM, and a ng-leave attribute when they are removed from the DOM.
  • The ng-repeat directive also adds a ng-move class value when the HTML element changes position.


Program
<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
height: 100px;
}

.ng-hide
{
 height: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js">
</script>
<body ng-app="myApp">
<h1>
Hide the DIV: <input type="checkbox" ng-model="myCheck">
</h1>
<div ng-hide="myCheck">
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

Output



How to write a program for a global API in angularJS.

   ,  No comments
  • The AngularJS Global API is a set of global JavaScript functions for performing common tasks like:

  1. Comparing objects
  2. Iterating objects
  3. Converting data
  • The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
APIDescription
angular.lowercase()Converts a string to lowercase
angular.uppercase()Converts a string to uppercase
angular.isString()Returns true if the reference is a string
angular.isNumber()Returns true if the reference is a number

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> 
{{x1}}
</p>
<p> 
{{x2}}
</p>
</div>
<script>
var app=angular.module("Abc",[]);
app.controller("DEF",function($scope)
{
$scope.x1="RUSHI";
$scope.x2=angular.lowercase($scope.x1);
});
</script>
</body>

</html>

Output





How to write a program for validation of forms in angularJS.

     No comments
  • AngularJS offers client-side form validation.
  • AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.
  • AngularJS also holds information about whether they have been touched, or modified, or not.
  • You can use standard HTML5 attributes to validate input, or you can make your own validation functions.


 Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="">
<p>
Type  an Email address in  the input fields
</p>
<form name="myForm">
<input type="email" name="myInput" ng-model="myInput">
</form>
<p >
{{myForm.myInput.$valid}}
</p>
</body>
</html>

 Output



How to write a program for forms in angularJS.

   ,  No comments
  • Input controls are the HTML input elements:

  1. input elements
  2. select elements
  3. button elements
  4. textarea elements
  • We are using a button elements in this example.
  1. Bind radio buttons to your application with the ng-model directive.
  2. Radio buttons with the same ng-model can have different values, but only the selected one will be used.
Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
Pick topic:
<input type="radio" ng-model="ABC" value="Animals">Animals
<input type="radio" ng-model="ABC" value="Cars">Cars
<input type="radio" ng-model="ABC" value="Flowers">Flowers
</form>
<div ng-switch="ABC">
<div ng-switch-when="Animals">
<h1> Animals</h1>
<p>Wlcome to world of Animals</p>
</div>
<div ng-switch-when="Cars">
<h1> Cars</h1>
<p>Wlcome to worls of Cars</p>
</div>
<div ng-switch-when="Flowers">
<h1> Flowers</h1>
<p>Wlcome to worls of Flowers</p>
</div>
</div>
</body>
</html>

Output



How to write a program for object event in angularJS.

   ,  No comments

You can pass the $event object as an argument when calling the function.
The $event object contains the browser's event object.

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="myapp" ng-controller="myctrl">
<h1 ng-mousemove="myFunc($event)">
Mouse Over Me
</h1>
<p>
coordinates:{{x + ',' + y}}
</p>
       </div>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope)
{
$scope.myFunc=function(obj)
{
$scope.x=obj.clientX;
$scope.y=obj.clientY;
}
});
</script>
</body>
</html>

Output



How to write a program for mouse click in angularJS.

   ,  No comments
 when a mouse button is clicked on an element, in this order:
  1. ng-mousedown
  2. ng-mouseup
  3. ng-click
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">
<button ng-click="count=count+1">
Click Me
</button>
<p>
{{count}}
</p>
</div>
<script>
var app=angular.module("ABC",[]);
app.controller("DEF", function($scope)
{
$scope.count=0;
});
</script>
</body>
</html>

Output



How to write a program for a mouse over element in angularJS.

   ,  No comments
  • Mouse events occur when the cursor moves over an element, in this order:

  1. ng-mouseenter
  2. ng-mouseover
  3. ng-mousemove
  4. ng-mouseleave
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 ng-mousemove="count=count+1">
mouse over me
</h1>
<h2>
{{count}}
</h2>
</div>
<script>
var app=angular.module("abc",[]);
app.controller("def",function($scope) 
{
$scope.count=0;
});
</script>
</body>
</html>

Output




How to write a program for DOM in angularJS.

   ,  No comments
  • 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.

   ,  No comments
  • 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.

   ,  No comments
  • 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

   ,  No comments
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.

   ,  No comments
  • 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.

   ,  No comments
  • 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.

   ,  No comments
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.

   ,  No comments
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.

   ,  No comments
  • 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.

   ,  No comments
  • 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


Write a program for adding a controller in angularJS.

   ,  No comments
  • Add a controller to your application, and refer to the controller with the ng-controller 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">
<input ng-model="name">
</div>
<script>
var app=angular.module('abc',[]);
app.controller('def' , function($scope)
{
$scope.name="Rushi Dave";
});
</script>
</body>
</html>

 Output

Write a program for a background color in angularJS.

   ,  No comments
Change the color of the input box by changing its value:

 Program
<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="myCol='Red'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
</body>
</html>

Output