asp.net mvc Angular js Datatable not working

Question

I am new in angular js with datatable and i am getting when on page load, i am trying to add load datatable using angular js.

Error :

angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module PMS due to:
Error: [$injector:modulerr] Failed to instantiate module angularMoment due to:
Error: [$injector:nomod] Module 'angularMoment' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Detail Error Error link

My Controller

var app = angular.module('PMS', ['angularMoment', 'ui.router', 'datatables'])
    .filter('jsonDate', ['$filter', function($filter) {
        return function(input, format) {
            return (input) ? $filter('date')(parseInt(input.substr(6)), format) : '';
        };
    }]);
app.controller('SpaceController', function($scope, SpaceService) {
    $scope.getAll = function() {

        loader(true);
        var getData = SpaceService.getAllData();
        getData.then(function(response) {
            if (response.data.success) {
                $scope.listdt = response.data.data;
                $scope.populateStatus();
                loader(false);
            } else {
                errorAlert("Oops", response.data.message);
                loader(false);
            }
        });
    }
});

My Template

@ {
    Layout = null;
} <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="~/Scripts/PMS_theme_js/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/PMS_theme_css/css/style.css" rel="stylesheet">
</head>
<body ng-app="PMS" ng-controller="SpaceController">
    <table datatable="ng" class="table display" id="TblID">
        <thead>
            <tr>
                <th>ID</th>
                <th>Key</th>
                <th>Name</th>
                <th>Description</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="d in listdt">
                <td>{{d.SpaceID}}</td>
                <td>{{d.SpaceKey}}</td>
                <td>{{d.SpaceName}}</td>
                <td>{{d.SpaceDesc}}</td>
                <td> <span class="label label-table {{d.StatusKey == 'A' ? 'label-success' : 'label-red'}}">{{d.StatusName}}</span></td>
                <td>
                    <a class="btn btn-primary btn-sm" ng-click="edit(d)"><i class="fa fa-pencil fa-lg"></i></a>
                    <a class="btn btn-danger btn-sm" ng-click="delete(d)"><i class="fa fa-trash fa-lg"></i></a>
                </td>
            </tr>
        </tbody>
    </table>
    <script src="~/Scripts/PMS_theme_js/plugins/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="~/Scripts/PMS_theme_js/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="~/Scripts/datatables/media/js/jquery.dataTables.js"></script>
    <script src="~/Scripts/angular-datatables/dist/angular-datatables.js"></script>
    <script src="~/Scripts/Angular/Module.js"></script>
</body>

</html>

Its working fine with Datatable,but when add datatable module its start getting error.Any reason where and what i am doing wrong with Angular js datatable.

It seems that you've not injected angularMoment correctly, refer to the documentation — Tushar Walzade
– Tushar Walzade, Commented Feb 25, 2019 at 13:12

Tushar Walzade · Accepted Answer · 2019-02-25 13:59:24Z

1

An error you mentioned shows that you've not injected angularMoment correctly, refer to the documentation.

Ensure that you've included both moment.js and angular-moment.js in your application, which would look something like following in your case -

<script src="~/Scripts/moment/moment.js"></script>
<script src="~/Scripts/angular-moment/angular-moment.js"></script>

answered Feb 25, 2019 at 13:59

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

asp.net mvc Angular js Datatable not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related