CODEWITHSUNDEEP
angularjs
raingod
raingod

Reputation: 1407

AngularJS code error - what am i missing?

Learning Angular JS, and following video from http://www.youtube.com/watch?v=i9MHigUZKEM - i'm getting a AngularJS error, but have no idea what it is, and frankly, how to debug this thing.... using AngularJS 1.2.3, btw.

here's the main page:

<html data-ng-app="demoApp">
<head>
    <title></title>

</head>
<body >
<div>
<!-- placeholder for views -->
<div data-ng-view=""></div>
<!-- placeholder up to here -->
</div>
<script src="angular.min.js"></script>

    <script>

        var demoApp = angular.module('demoApp',[]);

        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/view1',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/view1.html'
                })
                .when('/view2/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/view2.html'
                })
                .otherwise({ redirectTo: '/view1' });
        });

        demoApp.controller('SimpleController', function ($scope) {
            $scope.customers = [
                {name:'john',city:'phoenix'},
                {name:'jane',city:'sf'},
                {name:'jon',city:'Oakland'}
            ];

            $scope.addCustomer = function() {
                $scope.customers.push(
                    { 
                        name: $scope.newCustomer.name,
                        city: $scope.newCustomer.city
                    });
            };
        });


    </script>

</body>
</html>

and the view 1.html:

<div class="container">
    <h1>view 1</h1>
    Name: <br />
    <input type="text" data-ng-model="filter.name" />

    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name">{{ cust.name | uppercase }} - {{ cust.city | lowercase }}</li>
    </ul>
    <br />
    Customer Name:<br />
    <input type="text" data-ng-model="newCustomer.name" />
    <br />
    Customer City:<br />
    <input type="text" data-ng-model="newCustomer.city" />
    <br />
    <button data-ng-click="addCustomer()">Add Customer</button>
    <br />
    <a href="#/view2">View 2</a>
</div>

and View2.html

<div id="container" >
    <h1>view 2</h1>
    Name: <br />
    <input type="text" data-ng-model="filter.city" />

    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.city">{{ cust.name | uppercase }} - {{ cust.city | lowercase }}</li>
    </ul>
</div>

what am i missing??

Upvotes: 0

Views: 766

Answers (1)

eddiec
eddiec

Reputation: 7646

You need to make sure you're including angular-route.js, available here http://code.angularjs.org/1.2.3/angular-route.js

Also make sure you specify demoApp's dependancy on the ngRoute module.

var demoApp = angular.module('demoApp', ['ngRoute']);

If you follow that link you posted in your error message you'll see some details there.

Upvotes: 1

Related Questions