access mvc 5 web api 2 in angularjs

Access MVC 5 Web API 2 in AngularJs

The Table of Contents 

  1. The Reference file URLs. 
  2. The HTML code-sample 
  3. The AngularJs code- sample 


The Reference file URLs.
?
1
2
3
4
5
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="~/Scripts/app/CustonPlugins/ng-grid.csv.export.plugin.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="~/Scripts/app/CustonPlugins/ng-grid.csv.export.plugin.js"></script>
The HTML code-sample
?
1
2
3
4
5
<div class="row" ng-app="userApp">
    <div ng-controller="getUserServiceCtrl">
       <div class="ngGridStyle" ng-grid="userGridView"></div>             
    </div>
</div>
<div class="row" ng-app="userApp">
    <div ng-controller="getUserServiceCtrl">
       <div class="ngGridStyle" ng-grid="userGridView"></div>              
    </div>
</div>
AngularJs code- sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var baseURL = "http://localhost:56110/";
var app = angular.module('userApp', ['ngGrid']);
app.service('getUserService', function ($http) {
    this.getUsers = function () {
        // $http() POST method returns a $promise that we can add handlers with .then() function.
        return $http({
            method: 'GET',
            url: baseURL + 'Api/Setting/GetUsers/1'
        })
        .success(function (data, status, headers, config) {
        })
        .error(function (data, status, headers, config) {
            //TODO: handl error.
        });
    }
});
app.controller('getUserServiceCtrl', function ($scope, getUserService) {
    $scope.users = null;
    getUserService.getUsers().then(function (resp) {
        $scope.users = resp.data;
    });
    var removeRowTemplate = '<span style="display:block; text-align:center;"><button ng-click="editRowIndex(col, row)" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button><button ng-click="removeRowIndex(col, row)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button></span>';
    $scope.userColumns = [{ field: 'ContactName', displayName: 'User Name', width: "10%" },
            { field: 'ContactEmail', displayName: 'Email' },
            { field: 'ContactMobile', displayName: 'Mobile', width: "10%" },
            { field: 'AlertOptIn', displayName: 'AlertOptIn', width: "8%" },
            { field: 'LegalNoticeAccepted', displayName: 'Legal Notice', width: "10%" },
            { field: 'LastUpdateBy', displayName: 'LastUpdateBy' },
            { field: 'LastUpdateDate', displayName: 'LastUpdateDate' },
            {
                field: 'remove', displayName: 'Action', width: "7%", cellTemplate: removeRowTemplate
            }];
    $scope.filterOptions = {
        filterText: ''
    };
    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };
    $scope.userGridView = {
        data: 'users',
        columnDefs: 'userColumns',
        plugins: [new pluginNgGridCVSExport()],
        enablePaging: true,
        showFooter: true,
        enableCellSelection: true,
        enableRowSelection: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;
        $scope.userGridView.selectItem(index, false);
        $scope.users.splice(index, 1);
    };
    $scope.editRowIndex = function (col, row) {
        var index = this.row.rowIndex;
    };
});
var baseURL = "http://localhost:56110/";

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

app.service('getUserService', function ($http) {
    this.getUsers = function () {
        // $http() POST method returns a $promise that we can add handlers with .then() function.
        return $http({
            method: 'GET',
            url: baseURL + 'Api/Setting/GetUsers/1'
        })
        .success(function (data, status, headers, config) {
        })
        .error(function (data, status, headers, config) {
            //TODO: handl error.
        });
    }
});

app.controller('getUserServiceCtrl', function ($scope, getUserService) {
    $scope.users = null;

    getUserService.getUsers().then(function (resp) {
        $scope.users = resp.data;
    });

    var removeRowTemplate = '<span style="display:block; text-align:center;"><button ng-click="editRowIndex(col, row)" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button><button ng-click="removeRowIndex(col, row)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button></span>';

    $scope.userColumns = [{ field: 'ContactName', displayName: 'User Name', width: "10%" },
            { field: 'ContactEmail', displayName: 'Email' },
            { field: 'ContactMobile', displayName: 'Mobile', width: "10%" },
            { field: 'AlertOptIn', displayName: 'AlertOptIn', width: "8%" },
            { field: 'LegalNoticeAccepted', displayName: 'Legal Notice', width: "10%" },
            { field: 'LastUpdateBy', displayName: 'LastUpdateBy' },
            { field: 'LastUpdateDate', displayName: 'LastUpdateDate' },
            {
                field: 'remove', displayName: 'Action', width: "7%", cellTemplate: removeRowTemplate
            }];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };

    $scope.userGridView = {
        data: 'users',
        columnDefs: 'userColumns',
        plugins: [new pluginNgGridCVSExport()],
        enablePaging: true,
        showFooter: true,
        enableCellSelection: true,
        enableRowSelection: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };

    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;
        $scope.userGridView.selectItem(index, false);
        $scope.users.splice(index, 1);
    };

    $scope.editRowIndex = function (col, row) {
        var index = this.row.rowIndex;
    };
});
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.