Subscribe via RSS Feed

Javascript Basic Functionalities like classes and how we take it forward in Angular.js

May 22, 2015 0 Comments

This article describes about JavaScript basic functionalities like classes and how we take it forward in Angular.js.Class can create objects which can have properties and methods. nike air max pas cher We can facilitate program by instantiating the classes(objects) and using them in a proper way i.e. fjällräven kånken pas cher making use of it’s methods and properties. It increases the code re-usability. In JavaScript we can also define classes and objects, but not in a traditional way like using ‘class’ keyword etc. There is no class specific keyword in JavaScript. So let’s do it in a different way, which is not difficult. We will move on with an example. In this example we will just insert a person’s age from a page and display that age from another page. We have simply used browser’s localStorage to store the age as redirecting to another page leads to loss of value of a variable. We could do it in a same page which wouldn’t require localStorage, but as we will do the same thing in AngularJs we are proceeding with two different pages. So these are the files we are using here ,

  • index.html
  • show.html
  • script.js

index.html [javascript] <!DOCTYPE HTML> <html lang="en"> <head> <script src="script.js" type="text/javascript"></script> </head> <body> <ul> <li><a href="index.html">Save Age</a></li> <li><a href="show.html">Display Age</a></li> </ul> <div> <input type="text" id="age" /> <button id="saveage" onclick=saveAge()>Save</button> <div id="status"></div> </div> </body> </html> [/javascript] show.html [javascript] <!DOCTYPE HTML> <html lang="en"> <head> <script src="script.js" type="text/javascript"></script> </head> <body onload="retrieveAge()"> <ul> <li><a href="index.html">Save Age</a></li> <li><a href="show.html">Display Age</a></li> </ul> <div id="showage"></div> </body> </html> [/javascript] script.js [javascript] function myAge(){ //Set My Age this.setAge=function(age){ this.age=age; localStorage.setItem("myage",JSON.stringify(this)); document.getElementById("status").innerHTML="Age Saved"; }; //Get My Age this.getAge=function(){ var myage=localStorage.getItem("myage"); return JSON.parse(myage); } } function saveAge(){ //Called from index.html var ageObj=new myAge(); var age=document.getElementById("age").value; ageObj.setAge(age); } function retrieveAge(){ //Called from show.html var myageObj=new myAge(); var myage=myageObj.getAge(); document.getElementById("showage").innerHTML="My age="+myage.age; } [/javascript] Now, if we run them with our web server, it will result in whatever we wanted to do with this example(Insert and Display a person’s age).


 

How it works

First we have included ‘script.js’ in both the HTML pages and fired the functions on some events. Hollister Magasin In our JavaScript code we have created myAge() function which we are considering as our class and it will be used in both the pages by instantiating accordingly. Adidas Baratas The class has two functions setAge and getAge. In saveAge() function we are creating an object named ageObj which is calling setAge() function to save person’s age in localStorage. In show.html we are calling retrieveAge() function which is creating an object myageObj and calling getAge() function in order to get and display age stored in localStorage. Reader can download the complete source code from GitHub.

Taking the same forward in AngularJs

We have done the preceding example with JavaScript class and methods. Now we will do the same thing in AngularJs. Before we move on we first need to understand Angular controller concept(For reference check our last article about Angular Basics). Let’s jump in AngularJs example. In this example we will be using two controller for two pages and communicate between them using Angular Service. So the files used here are ,

  • index.html
  • saveage.html
  • displayage.html
  • angular.min.js
  • script.js

index.html [javascript] <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Single Page Application using Angularjs</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script> <script src="js/script.js"></script> </head> <body ng-app="myApp"> <div ng-controller="saveController"> <div ng-view> <!–This DIV loads templates depending upon route.–> </div> </div> </body> </html> [/javascript] saveage.html [javascript] <ul> <li><a href="#/">Save Age</a></li> <li><a href="#displayage">Display Age</a></li> </ul> <div> <input type="text" ng-model="inputage"> <button ng-click="setAge()">Save</button> <div>{{status}}</div> </div> [/javascript] displayage.html [javascript] <ul> <li><a href="#/">Save Age</a></li> <li><a href="#displayage">Display Age</a></li> </ul> <div> My Age={{myage}} </div> [/javascript] script.js [javascript] var app=angular.module(‘myApp’,[‘ngRoute’]); app.config(function($routeProvider){ $routeProvider .when(‘/’,{ templateUrl: ‘saveage.html’, controller:’saveController’ }) .when(‘/displayage’,{ templateUrl: ‘displayage.html’, controller:’displayController’ }); }); //Controllers app.controller(‘saveController’,function($scope,ageService){ $scope.setAge=function(){ ageService.saveAge($scope.inputage); }; $scope.$on(‘ageAdded’, function () { $scope.status="Age Saved"; }); }); app.controller(‘displayController’,function($scope,ageService){ $scope.myage=ageService.getAge(); }); //Service app.factory(‘ageService’, function ($rootScope) { var ageObj = { age:0, saveAge: function (age) { this.age=age; $rootScope.$broadcast(‘ageAdded’); }, getAge: function(){ return this.age; } }; return ageObj; }); [/javascript] Now, if we run this example with a web server ,the same result will appear as in first example.

Explanation

Here, in ‘script.js’, first we have configured our app myApp with router and assigned corresponding controllers. We have created an Angular Service ‘ageService’ to communicate between controllers because of controllers have their own local scope. zonnebrillen kopen ray ban The service defines an object which includes a property age and two functions saveAge(), getAge(). As their name reflects they do the saving and returning the age property. These functions are being called from the controllers according to their needs and sharing same data ‘age’. Thus we mapped our first example with AngularJs. User can download the complete source code for the AngularJs from Here. If you find this article about JavaScript classes and Angular.js Service helpful, you can connect us in Google+ and Twitter.

Leave a Reply

You must be logged in to post a comment.