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.
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>
Related
I'm using an API to make a table of all the data. The JSON url is connected (which I verified with a 200 Status). What am I doing wrong? Most importantly, if there is another way to accomplish what I'm trying to do, I'm open.
(function() {
var app = angular.module("RacingApp", []);
app.controller("DriversCtrl", function($scope, $http) {
$http.get("http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK").then(function(response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
})();
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>F1 Racing API</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="RacingApp">
<div class="container" ng-controller="DriversCtrl">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped table-bordered table-compressed">
<thead id="table-header">
<tr>
<th colspan="5">
<div class="text-left col-md-6">Drivers Championship Standings</div>
<div class="text-right col-md-6">
</div>
</th>
</tr>
</thead>
<thead>
<tr>
<th>Place</th>
<th>Nationality</th>
<th>Name</th>
<th>Sponsor</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in information">
<th scope="row">{{$index + 1}}</th>
<td>{{info.Driver.nationality}}</td>
<td>{{info.Driver.givenName}} & {{info.Driver.familyName}}</td>
<td>{{info.Constructors[0].name}}</td>
<td>{{info.points}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
I found a resolution. For whatever reason, the package I received back from the server was MRData.data, which didn't show up in the actual JSON data. It works now!!
i am basically trying to make a simple routing:
where i have defined the following in app.js
(function () {
"use strict";
var app = angular.module("productManagment", ["common.services", "ui.router", "productResourceMock"]);
app.config(["$stateProvider","$urlRouterProvider","$locationProvider",
function ($stateProvider,$urlRouterProvider ,$locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/products');
$stateProvider
.state('/products',
{
url: '/products',
templateUrl: 'app/products/productsView.html',
controller: "ProductListCtrl as vm"
});
}
]);
}());
i am using angular js 1.6.1 and angular-ui-router v 0.4.2 .
my index html is as follows:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet" />
<!--Library scripts here-->
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="common/services/common.services.js"></script>
<script src="common/services/productResource.js"></script>
<script src="common/services/productResourceMock.js"></script>
<script src="app/products/productListCtrl.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="productManagment">
<div ui-view></div>
</body>
</html>
while the product list view is :
<div class="panel panel-primary">
<div class="panel-heading" style="font-size: large"> Product List</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<td>
<button class="btn btn-primary" type="button"
ng-click="vm.toggleImage()">
{{vm.showImage ? "Hide" : "Show"}} Image
</button>
</td>
<td>Product</td>
<td>Code</td>
<td>Availability</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products">
<td>
<img ng-if="vm.showImage" ng-src="{{product.imageUrl}}"
style="width: 50px; margin: 2px"
title="{{product.productName}}" />
</td>
<td>{{product.productName}}</td>
<td>{{product.productCode}}</td>
<td>{{product.releaseDate}}</td>
<td>{{product.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
when i try to run the application, it should be routed to the "/products" along with its template, but i got the below error from the developer tools of chrome:
Error: [$compile:tpload] Failed to load template: app/products/productsView.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.6.1/$compile/tpload?p0=app%2Fproducts%2FproductsView.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:19730)
at processQueue (angular.js:16648)
at angular.js:16692
at Scope.$eval (angular.js:17972)
at Scope.$digest (angular.js:17786)
at Scope.$apply (angular.js:18080)
at bootstrapApply (angular.js:1841)
at Object.invoke (angular.js:4842)
at doBootstrap (angular.js:1839)
the network tab shows:
After a long time of reproduction we were able reproduce were the problem was comming from. The ngMock configuration was blocking nearly any request fired by the client. We could solve the problem by allow AngularJS $httpBackend to GET sources in the following directoy app/views/* which results in the following pattern:
$httpBackend.whenGET(/^\/app/*/views\//).passThrough();
it turns out that the problem was caused because of the usage of MockE2E.
so if I make something like $httpBackend.whenGET("/app/products/productsView.html").passThrough();
it is not intercepted by the mock.
I want to use Angular smart-table in my html code.
My environment:
server-side - Apache vs java
client side - html with angular
I downloaded the smart-table repository but I have difficulty to install the module manually and there is no instructions or tutorial for this on the web
What i tried so far is:
In my html file i am pointing to smart-table.js and smart-table.min.js
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
2.in my app I am referencing 'smart-table':
var app = angular.module('FarmManagment', ['smart-table']);
but it's not working the smart-table futures are not recognized.
please help to configure this correctly!!!
this is my code in general:
<html>
<head>
<title>get farms angularjs tester</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/style.css">
<link rel="stylesheet" href="../js/normalize.css">
<link rel="stylesheet" href="../app/assets/css/search box">
<link rel="stylesheet" href="../js/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
</head>
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<!-- Data table -->
<table id="auditTable" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection" cellspacing="0" width="100%">
<thead>
<tr>
<th st-sort="FarmName">Farm Name</th>
...
...
</tr>
</thead>
<tbody id ="tbody">
<tr ng-repeat="row in rowCollection">
<td ng-bind="row.FarmName"></td>
...
...
</tr>
</tbody>
</table>
<script>
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope,$http) {
$http.get('<path>').then(function(response) {
$scope.rowCollection = response.data.farms;
});
});
</script>
</body>
Thanks
Dima
My REST API returns hundreds rows of data that looks something like this:
[
{"roman_number":"I"},
{"roman_number":"II"},
{"roman_number":"III"},
{"roman_number":"IV"}
{"roman_number":"V"},
{"roman_number":"VI"},
{"roman_number":"VII"},
{"roman_number":"VII"},
...
{"roman_number":"MMI"}
]
I'd like to be able to display the data in table like so ...
<table border=1>
<tr><td>I</td><td>II</td><td>III</td><td>IV</td></tr>
<tr><td>V</td><td>VI</td><td>VII</td><td>VIII</td></tr>
<tr><td>IX</td><td>X</td><td>XI</td><td>XII</td></tr>
<tr><td>XIII</td><td>XIX</td><td>XX</td><td>XXI</td></tr>
<tr><td colspan=4> pagination here </td></tr>
</table>
I hope that I do this in angular as I am using angular HTTP to communicate with my REST API. Thanks.
Updated based on Partha Sarathi Ghosh suggestion.
I have this app file:
var app = angular.module("myApp", ['smart-table']);
angular.module('myApp').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
if(! input ) { return; }
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
... and I have this html ...
<table>
<tr ng-repeat="row in (all_types|chunkby:5)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
... but I get this error in my console ...
Error: [$rootScope:infdig] ...
... but the data displays ok. I noticed that the plunker demo also gets this error too.
Try this custom filter
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6,7,8,9,10,11, 12,13,14,15];
});
angular.module('plunker').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border=1>
<tr ng-repeat="row in (data|chunkby:4)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
</body>
</html>
Plunker Here
I am trying to iterate with ng-repeat, using data served from a REST service.
It works perfectly when the data is a single Json object, but when it comes to be a list of objects the HTML doesn't get the data.
Here is the code:
hello.js
function Hello($scope, $http) {
$http({ method: 'GET', url: 'http://devfz.azurewebsites.net/api/providers' }).
success(function (data) {
$scope.providers = [data];
}).
error(function () {
alert("Error");
});
}
index.html
<!DOCTYPE html>
<html ng-app 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">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/hello.js"></script>
<title>Bootstrap 101 Template</title>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
<div class="container theme-showcase" role="main">
<div class="jumbotron">
<div ng-controller="Hello">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="min-width: 80px;">Id</th>
<th style="min-width: 80px;">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="provider in providers">
<td>{{provider.id}}</td>
<td>{{provider.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Thanks so much :)
Your providers array contains a single element:
$scope.providers = [data]; // array containing a single element: data
If a JSON array is returned by the server, and you want to iterate over that array, then the code should be
$scope.providers = data;
after the controller definition make array providers
$scope.providers = [];
and in success callback concat data.
.success(data) {
$scope.providers = $scope.providers.concat(data)
}