Angular JS, javascript, jquery: February 2014

Wednesday, February 26, 2014

Alternate row colors using angularjs table data

<!doctype html>
<html ng-app>
<head><title>Angularjs Alternate Rows of Table : devzone.co.in</title>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<style>
.odd {
background-color: #FFF;
}
.even {
background-color: #ccc;
}
table{
border: 1px solid #ccc;
}
.main{
margin: 10px auto;
width:350px;
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div class='main'>
<table ng-init="names = ['Delhi', 'Mumbai', 'Pune', 'Gwalior', 'Jaipur', 'Bhopal', 'Indore', 'Chennai']" >
<tr ng-repeat="name in names" ng-class-odd="'odd'" ng-class-even="'even'">
<td>{{name}}</td>
</tr>
</table>
<a href='http://devzone.co.in' target='_blank'>DevZone.co.in</a>
</div>
</body>
</html>

Monday, February 10, 2014

Difference b/w Web 1.0, 2.0 & 3.0.

Web 1.0 – That Geocities & Hotmail era was all about read-only content and static HTML websites. People preferred navigating the web through link directories of Yahoo! and dmoz.

Web 2.0 – This is about user-generated content and the read-write web. People are consuming as well as contributing information through blogs or sites like Flickr, YouTube, Digg, etc. The line dividing a consumer and content publisher is increasingly getting blurred in the Web 2.0 era.

Web 3.0 – This will be about semantic web (or the meaning of data), personalization (e.g. iGoogle), intelligent search and behavioral advertising among other things.
If that sounds confusing, check out some of these excellent presentations that help you understand Web 3.0 in simple English. Each takes a different approach to explain Web 3.0 and the last presentation uses an example of a "postage stamp" to explain the "semantic web".
---------------------------------------------------------------------------------------------------------------------------------------------------------------

Most of the web users are well known about some common terminologies: web1.0, web2.0 and web3.0. So what are the uses of these terminologies? What are differences between them? After the invention of World Wide Web the idea behind the technology has been absolutely changed. It opens the new way to see the world through internet. It makes our day to day life easier in all around. We can easily operate our business globally. We can join a MNC and able to work from home easily.

Web1.0: In the beginning of web the information published in a static form well designed with the text and images. The main features of web w.1.0 are hyper-linking and bookmarking of the web pages. There are some design elements of web 1.0 andndash;
andbull; HTML based Static page.
andbull; It consists of framesets.
andbull; Online guestbook.
andbull; HTML form sent through email.

The term Web2.0 was first introduced by Oandrsquo;Reilly during the brainstorming discussion MediaLive International. The information available in this form is quite different from the past web1.0. It began in 2002 with new ideas to exchange as well as share the content such as Wiki, Weblogs, Widgets, and Tagging etc.

Key difference between web1.0 and web2.0
In Web 1.0 it is only for read. But in web2.0 you can express yourself by writing.
The former was only for corporate bodies. And the later is about you and your communities.
In web.20 you not only interact with site and webmaster you can also communicate with others who access that website.

Web 1.0 was the age of one and only language i.e. HTML web 2.0 is the field of XML.
While web1.0 was depended on advertising, web 2.0 has been popularized by word of mouth.
Previously was meant for website but web 2.0 is not for site it is also about blogs.

In Web 1.0 there was nothing to exchange. Everything was about one way. Through the emergence of web 2.0 you can exchange your thoughts with other and easily converse with them.

The Web 3.0 could be defined as semantic web, personalization like iGoogle, My Yahoo etc.
The semantic web is a more developed extension of WWW. Wit the help of this technology the web content can be conveyed not only in form of natural language, but also be readable by software agent which letting them to locate, share and assemble information more easily. The concept comes out from Sir Tim Berners-Lee the director of W3C with the vision to make the web medium for exchanging the data, information knowledge.

Other features of web 3.0
- It will be more portable and personal.
- More focused on the preferences of individuals (Me-onomy)
- Advertising oriented.
- Widgets with drag and drop facilities.
- Dynamic content.
- User behavior, user engagement etc.
Though this technology not yet capture the whole web world. It has been spreading out slowly. Some big online business houses have started to follow the standard of web 3.0 few of them are spoke.com, twine.com, wink.com. mybloglog.com, friendfeed.com etc.
- Some significant features of web 2.0 technology
- Clean and Simple design
- Number of columns is few.
- Simple navigation which is fixed in every pages of the site.
- Central layout

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

What is the Semantic Web?

The Semantic Web is a web that is able to describe things in a way that computers can understand.

The Beatles was a popular band from Liverpool.
John Lennon was a member of the Beatles.
"Hey Jude" was recorded by the Beatles.

Sentences like the ones above can be understood by people. But how can they be understood by computers?
Statements are built with syntax rules. The syntax of a language defines the rules for building the language statements. But how can syntax become semantic?
This is what the Semantic Web is all about. Describing things in a way that computers applications can understand it.

The Semantic Web is not about links between web pages.
The Semantic Web describes the relationships between things (like A is a part of B and Y is a member of Z) and the properties of things (like size, weight, age, and price)

Ref from: http://web14.blogspot.com/

What’s the difference between Web 1.0, Web 2.0 & Web 3.0?

World Wide Web, commonly known as ‘WWW’, was first launched in 1991. But as the technology advanced, newer versions in the form of Web 2.0 and Web3.0 came into existence. The latter are obviously considered more advanced and easy to use as compared to the Web 1.0. But most of us are confused regarding the changes and the evolution that took place. This article aims to clear out the differences through the below mentioned points.

Web 1.0

Web 1.0 was the first reiteration. Actually it was called ‘The Internet’ not version 1 or Web1.0. It was generally used before 1999 when experts called it the Read -Only era. The main features of ‘The Internet’ not Web 1.0 were hyper-linking and bookmarking of the web pages. It only consisted of online guestbook and framesets. There was no flow or communication between Consumer and the producer of the information. Also, the emails were sent through the HTML form. The best examples of ‘The Internet’ are static websites which were made during the ‘.com evolution’.

Web 2.0

Web 2.0 was first introduced in the market by O’Reilly at the brainstorming discussion at media live International in 1999. The information available through Web 2.0 empowered the new generation to develop new concepts like Wiki, Widgets and Video streaming. It also allowed many users to publish their own content through few basic steps, which was not possible in the Web 1.0 or The Internet. Web 2.0 was responsible for the development of various sites that we commonly use today like Twitter, Flickr and Facebook.

Web 3.0

Web 3.0 is known as the third generation of World Wide Web. It has everything that we could ever wish for. With the help of Web 3.0, web content was easily carried in the form of natural language. It also consist of micro formats, natural language search, recommendation agents which are commonly known as AI i.e. Artificial Intelligence. We can also find different attributes like Deductive Reasoning, Contextual Search, Evolution of 3D web, Personalized Search and Tailor made Search which was not present in earlier versions.
Through such advancements in Web 3.0, we have become empowered to do many things that we may have never dreamed of. But this not the end, as with the time we will get to see more advancements in World Wide Web that will make internet surfing an amazing experience.

copied from: http://blogs.weblinkindia.net/2010/12/27/whats-the-difference-between-web-1-0-web-2-0-web-3-0/

Sunday, February 9, 2014

display json data in table using angularjs just check json format: { details:[{},{}] } object array object:

html:
<!doctype html>
<html lang="en" >
<head>
<title>Page Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope,$http) {

$http.get('js/jsondataexample4json.json').success(function (data) {
$scope.myData = data.results;
});

});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">

<div ng-repeat="post in myData" >

<h2>
{{post.id}} - {{post.name}}<br/>
</h2>

</div>

</div>
</body>
</html>

json:

{
"results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
]

}

output:

1 - Test

2 - Beispiel

3 - Sample

Displaying json data with using ng-repeat in angularjs , arry in object json data:

html:

<!doctype html>
<html lang="en" >
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope,$http) {

$http.get('js/jsondataexample2json.json').success(function (data) {
$scope.myData = data;
});

});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">

<div ng-repeat="post in myData" >
<h2>
<a href='{{post.name}}'>{{post.age}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" width="100px" height="100px"/>
</div>

</div>
</body>
</html>

json:

[{

"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",

"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",

"banner":"http://i1.sndcdn.com/artworks-000065821197-xh0k21-original.jpg?d53bf9f",

"description":"Some Tesxt",

"time":"Tuesday, August 6, 2013" ,

"author":"Srinivas Tamada"

}]

output:

Tuesday, August 6, 2013 - Srinivas Tamada

Some Tesxt

Displaying json data without using ng-repeat, with module and $http.get

html:

<!doctype html>
<html lang="en" >
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope,$http) {

$http.get('jsondataexample2json.json').success(function (data) {
$scope.myData = data;
});

});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">
<h2>
<a href='{{myData.name}}'>{{myData.age}}</a>
</h2>
<div class='time'>{{myData.time}} - {{myData.author}} </div>
<p>{{myData.description}}</p>
<img ng-src="{{myData.banner}}" width="100px" height="100px"/>

</div>
</body>
</html>

json:

{

"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",

"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",

"banner":"http://i1.sndcdn.com/artworks-000065821197-xh0k21-original.jpg?d53bf9f",

"description":"Some Tesxt",

"time":"Tuesday, August 6, 2013" ,

"author":"Srinivas Tamada"

}

Note: json data is in object format that's why, we are not used the ng-repeat.
if the above json data is put inside the array i.e [{}], we may not get the ouput for above program.

output:

Tuesday, August 6, 2013 - Srinivas Tamada

Some Tesxt

displaying json data using ng-repeat in angularjs

html:

<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
//$http({method: 'POST', url: 'posts.json'}).success(function(data)
//{
//$scope.posts = data;

//or
$http.get('js/posts.json').success(function (data) {
$scope.posts = data;

});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">

<div ng-repeat="post in posts" >
<h2>
<a href='{{post.name}}'>{{post.age}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>

</div>
</body>
</html>

posts.json:

[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Ravi Tamada"
}
]

output:

Tuesday, August 6, 2013 - Srinivas Tamada

Some Tesxt