Web Code Helpers Coding Blog, Angularjs Tutorials, html5, css, jQuery, Ajax, javascript, html, examples and Demos Web CodeHelpers

AngularJS Event Handling with Example

creating AngularJS applications, 

 your application will need to handle DOM events like 
mouse clicks,
moves,
keyboard presses,
change events etc.

 AngularJS has a simple model for how to add event listeners to the HTML you generate from your views. This text will explain this model.

 
<!DOCTYPE html>
<html lang="en">

<head>
<title>Angular JS Events Sample Code</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
    <div>In this example, i tried to demonstrate the click event</div>
    <div ng-click="myData.doClick()">Click here</div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
                    alert("clicked");
                }
            } );
</script>

</body>
</html>

Read More

List of Events in Angular JS

In Every JS Frameworks first important thing to learn about list of events , 
You attach an event listener to an HTML element using one of the AngularJS event listener directives:
  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Read More

AngularJS Development Environment Setup

Set up your development environment to get started with AngularJS. 

 This is an important step since while going through the examples you may want to try them out as well. 

 Practically any text editor or IDE which supports JavaScript, HTML and CSS will do the job. 

  The reason is that while learning it you would like to remember the constructs and their spellings. It is easier to remember stuff if you manually type it. Here is a short list of Editors/IDE you can use:

We will be helping you out to set up development environment in Sublime Text because it is completely free and is very powerful text editor as well.
  • Sublime text tutorial series here. Each tutorial is hardly 7-8 minutes long and readies you for using Sublime Text to its full extent. Make sure you learn how to write sublime snippets.
  • Sublime text Package Control plugin here. It helps you install or uninstall plugins via GUI in Sublime Text.
  • Sublime text AngularJS plugin here. However it is in a very rudimentary form and the auto complete is not that great. After typing ng,the Angular prefix for its constructs(like ng-model, ng-repeat), you will have to scroll down the whole list to find out the construct you need.
You might be interested to learn how to use debugging tools on your favourite web browser. This will be helpful for understanding how AngularJS processes our code and manipulates DOM.

The above process will help to setup the environment, then let's start coding in Angular  

Read More

Object Oriented Javascript Terminology

Class
Defines the characteristics of the Object.
Object
An Instance of a Class.
Property
An Object characteristic, such as color.
Method
An Object capability, such as walk.
Constructor
A method called at the moment of instantiation.
Inheritance
A Class can inherit characteristics from another Class.
Encapsulation
A Class defines only the characteristics of the Object, a method defines only how the method executes.
Abstraction
The conjunction of complex inheritance, methods, properties of an Object must be able to simulate a reality model.
Polymorphism
Poly means "many"  and morphism means "forms".Different Classes might define the same method or property.


Read More

Mobile Device Orientation Change detection using Javascript / Jquery

Mobile Device Orientation Change detection using Javascript / Jquery



orientationchange Event in javascript

This method is what you would expect from a mobile API; a simple orientationchange event on the window:
// Listen for orientation changes 
window.addEventListener("orientationchange", function() { 
// Announce the new orientation number 
alert(window.orientation); 
}, false);

 During these changes, the window.orientation property may change. 
A value of 
0 means portrait view, 
-90 means a the device is landscape rotated to the right, and 
90 means the device is landscape rotated to the left.
 
Example : 
<script>           
  function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
</script>

 



orientationchange Event in jQuery







This method is what you would expect from a mobile API; a simple orientationchange event on the window:




// Listen for orientation changes 
$(window).on("orientationchange",function(){

  alert("The orientation has changed!");
});

Read More

Swift Programming Language e-book Download


Download the IOS App Development programming book using below Link


Read More

iOS App Development with 'Swift programming language'



Swift is an object-oriented programming language for iOS and OS X development created by Apple.  Designed to coexist with Objective-C and to be more resilient against erroneous code, Swift was introduced in 2014 at Apple's developer conference WWDC.[1] It is built with the LLVM compiler. A 500-page manual, The Swift Programming Language, was released at WWDC as well, available on the iBooks Store for free.[2]
On June 2, 2014, the WWDC app became the first publicly released app written in Swift.

Read More
Subscribe updates via Email