I have been trying to consume the webapi service that I built using angularjs. However, the page appears to be blank after running.
App.js
var app = angular.module("productsApp", ["productService"]);
app.controller("productsController", function ($scope, product) {
$scope.products = product.query();
});
Service.js
(function () {
angular.module("productService", ["ngResource"]).
factory("product", function ($resource) {
return $resource('http://localhost:55755/api/products/:id');
});
}());
Html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
</head>
<body ng-app="productsApp">
<div ng-controller="productsController as vm">
<table>
<tr ng-repeat="p in vm.products">
<td>{{ p.productName}}</td>
<td>{{ p.productCode }}</td>
<td>{{ p.releaseDate | date }}</td>
<td>{{ p.price | currency }}</td>
</tr>
</table>
</div>
<script src="Scripts/App.js"></script>
<script src="Scripts/service.js"></script>
</body>
</html>
You are using controllerAs syntax in view but not in controller
Try changing to:
app.controller("productsController", function ( product) {
var vm = this;
vm.products = product.query();
});
When using controllerAs you only need $scope for things like angular events and $watch
Related
Many times answered, but I still don't understand what's wrong in my code. I'm new to JavaScript and Angular, so please help why I'm getting this error.
Here's my HTML and JavaScript codes. I'm trying to make an array from user input values, show them in table and then insert a button to calculate the cheapest and the most expensive items of the list. Right now I'm stuck in getting the user inputs in the array because of the angular error.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [{"syotettyTuote": "syotettyHinta"}];
}]);
var syotettyTuote = $scope.document.getElementById("tuote");
var syotettyHinta = $scope.document.getElementById("hinta");
function lisaaListaanTuote(){
$scope.listaArr.push($scope.syotettyTuote.value);
}
function lisaaListaanHinta(){
$scope.listaArr.push($scope.syotettyHinta.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="syotettyTuote and syotettyHinta in listaArr">
<td>{{ $index + 1 }}</td>
<td>{{ x.syotettyTuote }}</td>
<td>{{ x.syotettyHinta }}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" ng-model="syotettyTuote" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
<input id="hinta" type="parseInt" ng-model="syotettyHinta" placeholder="Hinta" />
<button ng-click="lisaaListaanHinta()">Laita listaan</button>
</fieldset>
</form>
<h2>Listasi kallein ja halvin tuote</h2>
<button id="laske" onclick="laske()" placeholder="Laske kallein ja halvin tuote">Laske kallein ja halvin</button>
<textarea id="kallein" placeholder="Kallein" ></textarea>
<textarea id="halvin" placeholder="Halvin"></textarea>
</body>
</html>
You've used $scope object outside the Controller and the code language is a bit difficult to understand.
However, I've added the simple example from your code.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [];
$scope.lisaaListaanTuote = function(){
var val = angular.element(document.querySelector("#tuote")).val();
console.log(val);
$scope.listaArr.push(val);
}
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="item in listaArr">
<td>{{item}}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
</fieldset>
</form>
</body>
</html>
I am trying to fetch data from the rest api that I made. The api returns data but the angular fails to load it. I could see the data being passed from the network tab in developer tools.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
</head>
<body ng-app="productsApp">
<div ng-controller="productsController">
<table>
<tr ng-repeat="p in products">
<td>{{p.productName}}</td>
<td>{{p.productCode}}</td>
<td>{{p.releaseDate | date}}</td>
<td>{{p.price | currency}}</td>
</tr>
</table>
</div>
<script src="Scripts/App.js"></script>
<script src="Scripts/http.js"></script>
<script src="Scripts/service.js"></script>
</body>
</html>
Service.js
(function () {
angular.module("productService", ["ngResource"]).
factory("product", function ($resource) {
return $resource('http://localhost:55755/api/products/:id');
});
}());
App.js
var app = angular.module("productsApp", ["productService"]);
app.controller("productsController", function ($scope, product) {
$scope.products = product.query();
});
While query() returns a promise you can do it like this. Just inject a callback function which is executed in the promised part automatically.
product.query(function (products) {
$scope.products = products;
});
>> fiddle demo
index.html:
<!doctype html>
<html ng-app="customersApp">
<head>
<title>Angular js Hello World</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body ng-init="">
<h2>Customers</h2>
Filter: <input type="text" ng-model="customerFilter.name">
<br><br>{{name}}
<span class="pre-search">Your Search:</span> <span class="search-term">{{customerFilter.name}}</span>
<br><br>
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reversed">
<td>{{cust.name | lowercase}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
</tr>
</table>
<span>Total Customers : {{customers.length}}</span>
<script type="text/javascript" src="assets/js/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
and my app/app.js:
(function () {
angular.module('customersApp', []);
}());
and also my app/controllers/CustomersController.js:
(function () {
angular.module('customersApp')
.controller('CustomersController', function ($scope) {
$scope.sortBy = 'name';
$scope.reversed = false;
$scope.name = "Ramachandra";
$scope.customers = [{joined:'1984-06-29', name:'Virat Kohli', city:'banglore', orderTotal:'90.9468'}, {joined:'1920-03-19', name:'Yuvraj Singh', city:'vijayawada', orderTotal:'300.454'}, {joined:'1980-08-03', name:'MS Dhoni', city:'katamnallur', orderTotal:'35.78'}, {joined:'2010-01-23', name:'Michael Jordan', city:'Hoskote', orderTotal:'45.10'}];
$scope.doSort = function (propName) {
$scope.sortBy = propName;
$scope.reversed =! $scope.reversed;
};
});
}());
Now when i just put in my controller script src in html and call that controller alone, it goes just fine, when i just put around a few lines to make it a part of module, it goes off, thanks for answering.
Do you miss the controller import?
<script type="text/javascript" src="app/controllers/CustomersController.js"></script>
right after the app.js import
Really sorry to even say this guys after a lot of play around i found one of my file being named wrong in the src attribute, Sincere thankyou to Mickael R and pankaj parkar for being with me, really sorry,
If any one else is looking for answers and viewing this try looking for all the files being named and referenced right in the html file
I am trying to paginate a table which has 500 entries, with 10 entries per page.
To implement this I came across a GitHub page.
But it did not work. I would like to know what I am missing here.
Also my code ,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title> Pagination example </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
<thead>
<tr>
<th>POST_ID</th>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>BODY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="comments in pg.comment">
<td>{{comments.postId}}</td>
<td>{{comments.id}}</td>
<td>{{comments.name}}</td>
<td>{{comments.email}}</td>
<td>{{comments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
script.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pg.comment = [];
details();
function details() {
$http({
method: 'GET',
url: 'http://jsonplaceholder.typicode.com/comments'
}).success(function(data, status) {
console.log(data);
pg.comment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
pg.comment.push(pg.newComment);
pg.newComment = null;
};
}
})();
Firstly download the dirPagination.js from here.
Include the dirPagination.js file on your page like :
<script src="~/Content/dirPagination.js"></script>
After that add dir-paginate directive for pagination in script
file.code given below :
angular.module('plunker', ['angularUtils.directives.dirPagination']);
Then in tr tag add given line of code :
<tr dir-paginate="comments in
pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
If you study the demo on the page of angularUtils, you can see that they use:
1) include file with the library in html:
<script src="dirPagination.js"></script>
2) angular utility library is included as a dependancy in the application, see in script.js
var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);
So you need to add those 2 things in your app file to make pagination to work.
change
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
to
<table>
then change
<tr ng-repeat="comments in pg.comment">
to
<tr dir-paginate="comments in pg.comment | itemsPerPage: 10" >
I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
You need to define your module in the right way
var app = angular.module('app',[]);
Then, use it in your HTML file
<html ng-app="app">
See it working on jsbin
Note that, the angular module's name is the one defined within the quotes
angular.module('app',[]);
So, if you wrote var xModule = angular.module('app2',[]); your module name is app2 not xModule
Here is the code I am using :
<meta name="robots" content="noindex">
<html data-ng-app="app">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div data-ng-controller="sampleController">
<ul><li data-ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li></ul>
</div>
<script id="jsbin-javascript">var app = angular.module('app',[]);
app.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
</script>
</body></html>
And the output is :
Applying filters
{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}
Let me know what is missing here.