Translate

Wednesday, August 28, 2013

JQuery Ajax using AngularJS example (AngularJS Jquery Ajax)

In this example I will call the webservice http://itunes.apple.com/search using jquery ajax to search itunes. This application will be built using angularJS.

The entire app can be downloaded here

This is how the page would look like after the search.















The folder that contains the html looks like this








This is what is inside the scripts folder









If you just open the html by double clicking, it should work.

The angularjs version I used was v1.0.7. The code for other files are shown below.

iTunesSearch.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="iTunesSearchApp">
<head>
    <title></title>
</head>
<body>
    <div ng-controller="SearchController">
        <input type="text" ng-model="searchTerm" />
        <button type="button" ng-click="Search()">iTunes Search</button>
        <div ng-bind-html-unsafe="searchResults"></div>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/app.js"></script>
    <script type="text/javascript" src="Scripts/SearchControllers.js"></script>
    <script type="text/javascript" src="Scripts/SearchServices.js"></script>

</body>
</html>




App.js

var iTunesSearchApp = angular.module('iTunesSearchApp', []);


SearchController.js

iTunesSearchApp.controller('SearchController', function SearchController($scope, searchService) {

    $scope.Search = function () {

        $scope.searchResults = "Please Wait";
        var searchFor = $scope.searchTerm;
        searchService.CallWebService(searchFor,function (results) {
           
            $scope.$apply(function() {
                $scope.searchResults = results;
               
            });

        });
      
        };
    }
);

SearchService.js

var factory = iTunesSearchApp.factory('searchService', function () {


    return {

        CallWebService: function (searchTerm,callBack) {

            var webMethod = "http://itunes.apple.com/search?term=" + searchTerm;
            var displayHTML = "<br/>";

            $.ajax({
                type: "GET",
                url: webMethod,
                contentType: "application/x-www-form-urlencoded"
                dataType: "jsonp"
                success: function (msg) {


                    $.each(msg.results, function () {

                        $.each(this, function (key, value) {

                            displayHTML = displayHTML + key + ":" + value + "<br/>";
                        });
                        displayHTML = displayHTML + "<br/><br/>";
                    });
               
                    callBack(displayHTML);
            

                }, //success function ends here
                error: function (xhr, msg) {
                    callBack(msg);
                }
            }); //ajax function ends here


        }
    };
});

AngularJS tutorial for beginners (Introduction to angularjs)

What is AngularJS?
 AngularJS is an opensource javascript library built and maintained by google that helps us develop the front end (HTML/javascript/css) part of a web application in a declarative way.  As a developer I myself see  AngularJS as a higher level programming language for the client side.

The UI built using the angular framework applies MVC architecture at the client side. What I mean by that is if you build say the google search page using  AngularJS, then you will have a mvc application running in the client's browser that posts back to a webserver which itself may or may not implement mvc.


A simple example

I will show you a simple  AngularJS app that says hello world

Paste this into notepad and save the file as .html. Then open that file in chrome

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
    <title></title>
</head>
<body>
  
    <div ng-controller="TestCtrl">{{message}}</div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type="text/javascript">
        function TestCtrl($scope) {
            $scope.message= "Hello World";

        }
    </script>
</body>
</html

Things to note:

1>Inside the html tag notice the attribute ng-app. This declares the html tag as the root element of the application.
2>In the div has tag the attribute ng-controller tells the angular framework that this tag is associated with the controller TestCtrl (defined inside a script tag below)
3>The text {{message}}inside double curly braces is a property on the $scope object (defined below).
4>I am using google content delivery network to get the angular.min.js javascript file.
5>The function TestCtrl accepts a parameter $scope. This is a special parameter used by angular to pass data between controller and the view. You can set properties on this parameter which can be read in the view (HTML markup).

Check this out for a more advanced example on angularJS.


Wednesday, August 14, 2013

c# Deep Copy List


In the example below I will take a List of Dog and copy it into another List of Dog. To do that, I will use DataContractSerializer to serialize the original object into an XML and the deserialize it from the XML back into an object.

To follow the example, add a reference to the System.Runtime.Serialization dll as shown in the image on the right.



using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization;
 
namespace ConsoleApplication29
{
    class Program
    {
 
        static void Main(string[] args)
        {
            var dogs = new List<Dog> {new Dog {Age = 2, IsBig = true}, new Dog {Age = 3, IsBig = false}};
 
            List<Dog> dogsCopy;
 
            var ds = new DataContractSerializer(typeof(List<Dog>));
 
            using (var s = File.Create("Dog.xml"))
            {
                ds.WriteObject(s, dogs);//Serialize into an xml file
            }
 
            using (var s = File.OpenRead("Dog.xml"))
            {
                dogsCopy = (List<Dog>)ds.ReadObject(s);//Deserialize from an xml file and cast into an object
            }
        }
 
    }
 
    public class Dog  
    {
        public int Age { getset; }
        public bool IsBig { getset; }
 
    }
}

C# deep copy object


using System.IO;
using System.Runtime.Serialization;

namespace ConsoleApplication29
{
    class Program
    {

        static void Main(string[] args)
        {
            var dog = new Dog { Age = 2, IsBig = true };

            Dog dogCopy;

            var ds = new DataContractSerializer(typeof(Dog));

            using (var s = File.Create("Dog.xml"))
            {
                ds.WriteObject(s, dog);//Serialize into an xml file
            }

            using (var s = File.OpenRead("Dog.xml"))
            {
                dogCopy = (Dog)ds.ReadObject(s);//Deserialize from an xml file and cast into an object
            }
        }

    }

    public class Animal
    {
        public int Age { getset; }

    }

    public class Dog : Animal
    {
        public bool IsBig { getset; }

    }
}