Can someone take a look at my code and help me out? I'm trying to learn Angular.js by following the popular Angular.js in 60 minutes video tutorial, but it seems like things have been updated since then. I'm having trouble getting my routes to work properly. Any help would be greatly appreciated!
I'm struggling to figure out what's missing in order to get these routes working correctly.
Here are the scripts from my HTML page:
var demoApp = angular.module('demoApp', ['helperModule']);
var controllers = {};
demoApp.controller("CustomersController", function ($scope){
$scope.customers = [
{name: 'Dave Jones', city: 'Phoenix'},
{name: 'Dave Jones', city: 'New York'},
{name: 'Jones Suman', city: 'Phoenix'},
{name: 'Naresh Babu', city: 'Hyderabad'}
];
});
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: "SimpleController",
templateUrl: "views/view1.html"
})
.when('partial2',
{
controller: "SimpleController",
templateUrl: "views/view2.html"
})
.otherwise({ redirectTo: "/"})
});
$scope.addCustomer = function(){
$scope.customers.push({name: $scope.newCustomer.name, city: $scope.newCustomer.city});
}
<script src = "angular-route.js"></script>
These are the views I have for view #1 and view#2. Everything looks correct to me, but I can't seem to get any customer names to appear.
<div cass = "container">
<h2>View 1</h2>
Name:
<input type = "text" data-ng-model="filter.name" />
<ul><li data-ng-repeat="cust in customers | filter:filter.name"></ul>
Customer Name: <br />
<input type= "text" data-ng-model="newCustomer.name" />
Customer City: <br />
<input type= "text" data-ng-model="newCustomer.city" />
<button data-ng-click="addCustomer()"> Add Customer </button>
<a href="#/view2"> View 2</a>
</div>
<div cass = "container">
<h2>View </h2>
<div ng-controller="CustomersController">
Search: <input type = "text" ng-model="searchText" />
{{ searchText }}
<br />
<h3> Customers </h3>
<table>
<tr ng-repeat="cust in customers | filter:city">
<td>{{ cust.name }}</td>
<td>{{ cust.city }}</td>
<td>{{ cust.total | currency}} </td>
</tr>
</table>
</div>