How to declare the variable in Type Script

Customer.Ts:

class CustomerDetails{
  public CustomerName: string = "";
  public CustomerNumber: int = 0;
}

• First should define the type of scope "Public / Private / Protected etc....".
• Next, give the name of the varible.
• Next, provide the type of variable as "string / int / boolean etc...." but before this we should have ":" to declare the type of variable.

How to create a class in Type Script?

Customer.Ts:

class CustomerDetails{

}

In Type script, for each Type Script (.ts) files it will generate Java Script (.js) file with the same file name.

The above code will render in Customer.js file as below:

var CustomerDetails= (function(){
  *****
  *****
  *****
return CustomerDetails;
}());

How to pass the data from one Controller to another Controller OR one Directive to another Directive in angularjs

var app = angular.module('myApp', []);
 //Controller-1:
app.controller('FirstCtrl', function($rootScope, $scope){
     $scope.register = function(){
    $rootScope.$broadcast('myName', $scope.name)
    }
});
//Controller-2:
app.controller('SecondCtrl', function($scope){
      $scope.$on('myName', function(events, args){
        console.log(args);
        $scope.name = args;
      })
   });

How to give custom Header name for ng-grid in AngularJS

Step-1:

• Create new JavaScript file called "Myangualr.js". Add below code
• Create angular Module:
• angular.module("myAppModule", ['ngGrid',])
• Create angular Controller for the above module:
• var myAngualrApp = angular.module("myAppModule", ['ngGrid',])
• myAngualrApp.controller("myController", function ($scope) { $scope.myData = [{ name: "Moroni", age: 50 },                 { name: "Tiancum", age: 43 }, {name: "Jacob", age: 27 },{ name: "Nephi", age: 29 }, { name: "Enos", age: 34 }]; $scope.gridOptions = { data: 'myData', columnDefs: [{ field: 'name', displayName: 'Full Name' }, { field: 'age', displayName: 'Age' }] }; }})

Step-2:

• Create html file and add the below code:
• <div ng-app="myAppModule">
•             <div ng-controller="myController">                
•                <div class="gridStyle" ng-grid="gridOptions"></div>
•             </div>
•         </div>
• Add the below css class for grid alignments:
• <style>
•     .gridStyle {
•         border: 1px solid rgb(212,212,212);
•         width: 400px;
•         height: 300px;
•     }
• </style>
• Run the soultion and out put will display in the browser...

OutPut:

How to use ng-grid using Angular JS

Step-1:

• Create new JavaScript file called "Myangualr.js". Add below code
• Create angular Module:
• angular.module("myAppModule", ['ngGrid',])
• Create angular Controller for the above module:
• var myAngualrApp = angular.module("myAppModule", ['ngGrid',])
• myAngualrApp.controller("myController", function ($scope) { $scope.myData = [{ name: "Moroni", age: 50 },                 { name: "Tiancum", age: 43 }, {name: "Jacob", age: 27 },{ name: "Nephi", age: 29 }, { name: "Enos", age: 34 }]; $scope.gridOptions = { data: 'myData' }; }})

Step-2:

• Create html file and add the below code:
• <div ng-app="myAppModule">
•             <div ng-controller="myController">                
•                <div class="gridStyle" ng-grid="gridOptions"></div>
•             </div>
•         </div>
• Add the below css class for grid alignments:
• <style>
•     .gridStyle {
•         border: 1px solid rgb(212,212,212);
•         width: 400px;
•         height: 300px;
•     }
• </style>
• Run the soultion and out put will display in the browser...

OutPut:

Implement Angular JS "Hello World"

Step-1:

• Create the MVC solution, Right click on the solution name in "Solution Explorer" and select "Manage NuGet Package" and download angluar files.
• Add the Angular JS referance in bundle.js or _Layout.cshtml:
• BundleConfig.cs:
• bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(                      "~/Scripts/bootstrap.js","~/Scripts/angular.min.js","~/Scripts/ng-grid.js","~/Scripts/Myangualr.js","~/Scripts/respond.js"));

Step-2:

• Create new JavaScript file called "Myangualr.js". Add below code
• Create angular Module:
• angular.module("myAppModule", ['ngGrid',])
• Create angular Controller for the above module:
• var myAngualrApp = angular.module("myAppModule", ['ngGrid', ])
• myAngualrApp.controller("myController", function ($scope) {   $scope.DispalyText="Hello World !!!" // Your Code is here }})

Step-3:

• Create html file and add the below code:
• <div ng-app="myAppModule">
•             <div ng-controller="myController">                
•                 {{DispalyText}}
•             </div>
•         </div>
• Run the soultion and out put will display in the browser...