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