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>
Notedata-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>


No comments: