Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

Monday, 14 May 2018

028 AngularJS Animation

AngularJS Animation
Animation is a process to achieve some visual effect on the view.
To achieve Animation , you have to do

1) Add “angular-animate.js”  to your application.


2) You have to add “ngAnimate” to your application.

Example :

<!DOCTYPE html>
<html>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

<style>
div {
         transition: all linear 0.5s;
         background-color : Green;
         height: 100px;
         width: 100px;
}

.ng-hide {
            height: 0;
            width: 0;
            background-color: transparent;
           top:-200px;
           left: 200px;
}
</style>
<script>
          var app = angular.module('myApp', ['ngAnimate']);
</script>

<body ng-app="myApp">

<h1>Check / Uncheck to show hide div : <input type="checkbox" ng-model="mldShowHide"></h1>

<div ng-hide="mldShowHide">
</div>


</body>
</html>


Output

ngAnimate does not do animation , ngAnimate directive are added to notice event related to animation.The folling is the directive commonly used during animation programmig.

  1. ng-show
  2. ng-hide
  3. ng-class
  4. ng-view
  5. ng-include
  6. ng-repeat
  7. ng-if
  8. ng-switch
  9. ng-animate
  10. ng-hide-animate
  11. ng-hide-add
  12. ng-hide-remove
  13. ng-hide-add-active
  14. ng-hide-remove-active





- No comments:
Labels:

026 AngularJS Includes

'ng-include' directive alow to add HTML from an external file.But the file should be within the same domain.By default AngularJS does not allow cross doing HTML from an external file.

Example 
 

<!DOCTYPE html>
<html>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
         <div ng-include="'myHtmlPage.htm'"></div>

</body>
</html>

Output

 This is my HTML Page.


Include Cross Domains
To include cross domain , you need to add config function of your application.

 Example 
 
<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">


<script>
 
var app = angular.module('myApp', [])

app.config(function ($sceDelegateProvider) 
{
         $sceDelegateProvider.resourceUrlWhitelist
     ([
             'http://adrilal.blogspot.in/2016/10/dooars-tour-sultanikhola-samsing.html'
          ]);
});

</script>

</body>
</html>

-------------




025 Bootstrap Typeahead
- No comments:
Labels:

Tuesday, 1 May 2018

027 AngularJS Routing

AngularJS Routing

AngularJS is a single page application (SPA). ngRoute  directive  route the application within a single page. ngRoute  module  help to navigate between pages , link without reloading the page.
.The routing is completely based on URL,  when is specific URL are requested, ngRoute  render the view  defined as per routing rules.


Example :

<html>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Home</a></p>

<a href="#!C#">C# Tutorial</a>
<a href="#!Javscript">Javscript Tutorial</a>
<a href="#!AngularJS">AngularJS Tutorial</a>



<div ng-view></div>

<script>

var app = angular.module("myApp", ["ngRoute"]);

      app.config(function ($routeProvider) {
          $routeProvider
          .when("/", {
           templateUrl: "Home.html"
          })

          .when("/C#", {
           templateUrl: "C#.html"
          })


          .when("/Javscript", {
           templateUrl: "Javscript.html"
        });

         .when("/AngularJS", {
           templateUrl: "AngularJS.html"
        });

});
</script>

</body>
</html>


- No comments:
Labels:

025 AngularJS Exception Handling

AngularJS Exception Handling

          While executing any program , if any unwanted situation is occurred , exception occurs . Most of the programming languages & scripting has facility to handle exceptions. JavaScript use try catch  finally for exception handling purpose.AngularJS $exceptionHandler detective is used to handle exceptions . $exceptionHandler write exception to the browser console , you can override this functionality. The error is written in $log.error by default.

 Below is the example of exception handling 
Example
<div>

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

angular.module("myApp", [])
.controller("myController", function ($scope, $exceptionHandler) 
{
           $scope.myFunction = function ()
          {
               try 
        {
                       throw new Error("Your have generated an exception");
              }
             catch (except) 
       {
                $exceptionHandler(except.message, " : Button was Pressed");
            }
        }
});

</script>
</head>
<body>
           <div ng-app="myApp" ng-controller="myController">
          <button ng-click="myFunction()">
Click Here
</button>
</div>
</body>
</html>
</div>

Output :













Error handling can be customize also.You can use factory method to create an exception.


Custom Error Handleing


<!DOCTYPE html>
<html>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head runat="server">  

<script>
          var app = angular.module('myApp', []);
         app.factory('$exceptionHandler', function ()
        {

                  return function (exception, cause)
                  {
                         alert( exception.message);
                  }; 
       });


        app.controller('myController', function ($scope) 
    {
              $scope.GenerateErroe = function ()
              {
                       throw { message: 'error occurred' };
              }
      });

</script>
</head>
<body>
                <div ng-app="myApp" ng-controller="myController">
                <input type="button" value="Clik Me!" ng-click="GenerateErroe()" />
</div>
</body>
</html>

Output :


Clik Me!



- No comments:
Labels:
Subscribe to: Posts (Atom)

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

  বাঙালি মানে ঘোড়া পাগল | দু একদিন ছুটি পেলো মানে বাঙালি চলল ঘুরতে | সে সমুদ্রই হোক , পাহাড়ি হোক বা নদী হোক। বাঙালির ...

  • 020 Weekend Tour Chandipur
    Another weekend Getaway of Odisha  is Balasore, commonly known as Baleshwar . Balasore is  a district  of Odisha,India. Chandipur : Chandi...
  • 019 C# Garbage Collcetion
    Garbage collection                    Garbage collection is a technique to recover the memory consumed by some unused variable and objec...
  • What is json.stringify ?
    What is json.stringify ? If the stringify method sees an object that contains a toJSON method, it calls that method, and stringifies the ...