Java Script

Passing JSON data to wcf service using Ajax call's

var jsonData = { "SRNO": SRNO };

        $.ajax({

            type: "GET",

            contentType: "application/json; charset=utf-8",

            url: "http://localhost:7073/Service1.svc/GetMySdrPopUpData",

            dataType: "json",

            data: jsonData,

            success: function (data) {

                myProposal(data);

            },

            failure: function () {

                alert("Failure due to connecting..");

            }

        });

We need to set qequest format as JSON format,Write code in wcf interface like this

[OperationContract]

[WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = ebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetMySdrPopUpData?SRNO={SRNO}")]

List<MySdrData> GetMySdrPopUpData(string SRNO);

//-----------------------------------------
$.ajax({
url:"demo.aspx/LoadData",
dataType:"JSON",
data:"{'Id':'"+FormId+"'}"
contentType:"application/json;charset=utf-8",
type:"POST",
success: function(){
}
failure: function(){
}
});

Angular JS
AngularJS is a JavaScript framework. It is a library written in JavaScript.

• AngularJS extends HTML with new attributes
• AngularJS is perfect for Single Page Applications
• We will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.

AngularJS extends HTML

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

• The ng-app directive defines an AngularJS application
• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data
• The ng-bind directive binds application data to the HTML view

    <div ng-app=" ">       

            Name :

        <input type="text" ng-model="name" placeholder="Enter name here" />

        </p>

        <p ng-bind="name"></p>

    </div>

• AngularJS starts automatically when the web page has loaded.
• he ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application
• The ng-model directive binds the value of the input field to the application variable name
• The ng-bind directive binds the innerHTML of the <p> element to the application variable name

Angular JS-directives

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

1. AngularJS directives are HTML attributes with an ng prefix
2. The ng-init directive initialize AngularJS application variables

   <div ng-app="" ng-init="firstName='John'">
     <p>The name is <span ng-bind="firstName"></span></p>
   </div>

Note: data-ng-, instead of ng-

AngularJS Expressions

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

• AngularJS expressions are written inside double braces: {{ expression }}
• AngularJS will "output" data exactly where the expression is written

   <div ng-app="">
     <p>My first expression: {{ 5 + 5 }}</p>
   </div>

• AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive

  <div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p>{{name}}</p>
  </div>

AngularJS Applications

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

• AngularJS modules define AngularJS applications
• AngularJS controllers control AngularJS applications
• The ng-app directive defines the application, the ng-controller directive defines the controller

    <p>Try to change the names.</p>

    <div ng-app="myApp" ng-controller="myCtrl">

        First Name:

        <input type="text" ng-model="firstName" /><br />

        Last Name:

        <input type="text" ng-model="lastName" /><br />

        <br />

        Full Name: {{firstName + " " + lastName}}

    </div>

    <script>

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

        app.controller('myCtrl', function ($scope) {

            $scope.firstName = "SHANKAR";

            $scope.lastName = "PARSHIMONI";

        });

    </script>