Appychip: April 2014

Saturday 12 April 2014

Getting Started with dojo : Part 1

DOJO

Dojo is a lightweight javascript library which have the following features:

Lightweight
Provide object oriented features
Help to build AJAX rich application
Large scale web application can be built
Provide widget library
Saves development time
Prevent cross browser inconsistency
And many more

Follow the instruction to get started with dojo :

Download stable version of dojo from dojotoolkit.org
In your www directory of wamp server make a folder named learndojo, in the folder learndojo make another directory dojoroot.
Unzip the downloaded dojo library in this dojoroot directory, directory structure should be like www/learndojo/dojoroot/dojo/dojo.js . The file dojo.js is present in the dojo folder of your unzipped directories.
In the learndojo directory make a file and named it index.html which have the following code.



<html>


<head>


<title>Learning Dojo</title>


<!--Below line includes the dojo.js files from the directory dojoroot/dojo/ -->


<script src="dojoroot/dojo/dojo.js">


</script>





</head>


<body>


<h1>Learning Dojo</h1>


<div id="message">Following are some features of dojo</div>


<ul id="list">


<li>Rich Internet application, saving development time</li>


<li class="highlight">Dojo have widget library and object oriented features which helps to build a AJAX powered web application</li>


<li>Extremely light-weight</li>


</ul>


</script>


<script>


/*Here dojo.onLoad is a function which will create a div on this page gets loaded and will add the text Hello learner.... to the body of this page. */


dojo.addOnLoad(function() {


dojo.create(


"div",


{


"innerHTML": "Hello, Learner. I hope you are enjoying dojo!"


},


dojo.body()


);


});


</script>


</body>


</html>

In the above code, the we have included dojo.js in the <head> section and we are using dojo to create a div dynamically when the web page gets loaded.
The dojo.onLoad function creates a div and add the text to the body "Hello learner, I hope you are enjoying dojo".
The same working code you can fork from git also.

Thursday 3 April 2014

Getting started with Angularjs

Getting started with Angularjs

Angularjs is an awesome javascript library by google. It works on MVW (Model View Whatever) framework. HTML is good to have static documents but it failed to have dynamic views. The AngularJs allows you to do so.

Let us take an example to start with, so that you can have better understanding of angularjs.

First of all download the file angular.min.js

keep it where you are going to make your other files in which you will include this file.

Now make a file usingDirectives.html where you have kept angular.min.js file.

usingDirectives.html file will contain the following code :

<html data-ng-app=""> <!--here data-ng-app="" tells that we are using the angular in this file,
you can also use ng-app instead of data-ng-app
This is also known as directives-->
 <head>
  <title>Using Angularjs directives</title>
  
 </head>

 <body>
  Name : 
  <br>
  <input type="text" data-ng-model="name" />  {{ name }}
  <!--Now here in the input field we have used the directive data-ng-model, a model is where the data resides,
  we have given the name of model as "name" which we will use as the variable for data binding.
  Here the variable is placed in {{}} whcih is a data binding expression.
  Whatever we type in the model (textbox) will be binded to the {{name}}. -->
  <script  src="angular.min.js"></script>
 </body>
</html>

Here in this example we have data-ng-app="" in the html tag which tells that we are using the angular in this file, we can also use ng-app instead of data-ng-app, This is also known as directives.

We have an input field, we have used the directive data-ng-model, a model is where the data resides, we have given the name of model as "name" which we will use as the variable for data binding.
Here the variable is placed in {{}} which is a data binding expression.
What ever we type in the model (textbox) will be binded to the {{name}}
I hope this example is the simplest one to start with, you can also get the same working example from this link .