Alex McCalman Alex McCalman - 2 months ago 19
Javascript Question

Including AngularJS modules in HTML

I've recently been trying to learn AngularJS, but I can't seem to get my HTML to see the angular module I've made. The bindings seem to work if they don't interact with the module...

My HTML:



<!DOCTYPE html>
<html ng-app="productsModule">
<head>
<meta charset="UTF-8">

<script src="../lib/dependencies/angular.min.js"></script>
<script src="../lib/dependencies/angular-resource.min.js"></script>

<script src="../scripts/products.module.js"></script>

<title>ProductsTestPage</title>
</head>
<body>
<div ng-contoller="ProductListJSController as productList">
<h1>Product Test Page</h1>

<span>Total number of products: {{ productList.total() }}</span>

<span>{{ productList.test }}</span>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in productList.products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</tbody>
</table>

<p> 1 + 2 = {{1+2}} </p>
</div>

</body>
</html>





My JS:



angular.module('productsModule', [])
.controller('ProductListJSController', function(){
//var productList = this;

this.test = 'test';

this.products = [
{id: 53, name:'gnome 1', price: 50},
{id: 54, name:'gnome 2', price: 70},
{id: 55, name:'gnome 3', price: 90}];
this.total = function(){
var count = 0;
angular.forEach(this.products, function(){
count += 1;
});
return count;
};
});





I'm pretty sure I've done everything right, and it's mostly the same as the examples I've found, but it just doesn't seem to display any of the bindings refering to the product module.

Answer

Check your spelling:

<div ng-contoller="ProductListJSController as productList">

Should be:

<div ng-controller="ProductListJSController as productList">