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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.