Hers is my code in html pasted in WebContent folder created using Dynamic Web Project in eclipse:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('country_codes.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body ng-controller="CountryCtrl">
<h2>Angular.js JSON Fetching Example</h2>
<table>
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</body>
</html>
The json data is written in "country_codes.json" which is placed at the same location where html file has been placed.
]1
But I am getting the output as shown in below image.Please let me know why it is not reading data from server
you missed ng-app directive
<body ng-app="countryApp" ng-controller="CountryCtrl">.....</body>
Related
I'm trying to setup an AngularJS application but I keep running into issues when bootstrapping it, I am able to get it run on an express server via node.
But when I go to initiate a controller my developer tools console won't return the console logged hello world in the console.
I can't seem to figure it out as I have (as far as I'm concerned) written it correctly. I have used ng-app as well as as ng-view and tried to instantiate it with ng-controller calling the controller name.
File Structue:
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Contact List App</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl" ng-view>
<h1>Contact List App</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
</tr>
</thead>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
}]);
Errors:
EDIT: I have added the server.js code here:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public' ));
app.listen(3000);
console.log('Server running on 3000');
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
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
I'm doing a basic Restangular example and it works on AngularJS 1.1, however on 1.2, the REST request is sent, data is received, but the table is not displayed properly.
I read through some threads here about upgrading from 1.1 to 1.2 but I don't see the issue as the example is very simple and does not explicitly use ngRoute, isolated scopes or custom directives.
HTML
<!DOCTYPE html>
<html ng-app="countries">
<head>
<meta charset="utf-8" />
<title>REST Country Example</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.angularjs.org/1.2.27/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.27/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdn.rawgit.com/mgonto/restangular/master/dist/restangular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>
<h2>Restangular Example with RESTCountries.eu</h2>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries | filter:search | orderBy:'name'">
<td>{{country.name}}</td>
<td>{{country.capital}}</td>
<td>{{country.alpha2Code}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JS
app = angular.module('countries', ['restangular']);
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://restcountries.eu/rest/v1');
});
app.controller('mainCtrl', function($scope, Restangular) {
$scope.countries = Restangular.all('all').getList();
});
1.1.5 Plunk (working)
1.2.27 Plunk (not working)
Any idea what is missing/incorrect in order to get this working properly on 1.2?
Cheers,
I have never used restangular before. Looks like it returns a promise for 1.2 version, instead of data, I am able to load the data with this minor modification:
app.controller('mainCtrl', function($scope, Restangular) {
Restangular.all('all').getList().then(function(result) {
$scope.countries = result;
});
});
Plunker
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)
}