0

I'm following this tutorial : http://www.youtube.com/watch?v=i9MHigUZKEM

I'm 46:32 minutes in and here is my code so far :

<html data-ng-app="demoApp">

<body data-ng-controller="SimpleController"} ]">

    <div data-ng-controller="SimpleController">
        Name : <br /> <input type="text" data-ng-model="name" /> {{name}} <br />

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

    <script src="angular.min.js"></script>

    <script>
        //[] means no dependencies
        var demoApp = angular.module('demoApp', [])

        demoApp.config(function($routeProvider) {
            $routeProvider.when('/', {
                controller : 'SimpleController',
                templateUrl : 'View1.html'
            }).when('/partial2', {
                controller : 'SimpleController',
                templateUrl : 'View2.html'
            })
            .otherwise({ redirectTo: '/'});
        });

        function SimpleController($scope) {

            $scope.customers = [ {
                name : 'John Smith',
                city : 'Pheonix'
            }, {
                name : 'Jane Doe',
                city : 'San Francisco'
            }, {
                name : 'Derek Doe',
                city : 'New York'
            } ];
        }

        demoApp.controller('SimpleController', SimpleController);
    </script>
</body>
</html>

But the code is not working as expected. The code looks fine to me but there is obviously something wrong. Am I missing an import or the code incorrect > Error :

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=demoApp&p1=Erro…paces%2F04072013%2FAngularJSFirst%2FWebContent%2Fangular.min.js%3A32%3A427) 
5
  • Use unminified version for development...has more verbose error output that is removed in minified version
    – charlietfl
    Nov 15, 2013 at 16:57
  • 2
    Your ng-controller attribute has some unnecessary characters after it. Should the angular script import be in the head of the document? Nov 15, 2013 at 16:59
  • also no reason for nesting same controller in markup
    – charlietfl
    Nov 15, 2013 at 17:02
  • 1
    also depending on the version of Angular you are using, you may need to inject 'ngRoute' into your 'demoApp' module. Nov 15, 2013 at 17:31
  • this line has obviously syntax errors: <body data-ng-controller="SimpleController"} ]"> remove the extra } ]" at the end... Nov 15, 2013 at 17:44

1 Answer 1

2

As per all the comments here's a quick summary to might solve your problem(S)

-1 Include <script src="angular.min.js"></script> in the <head> of your document or at the end. Use uniminifed version for development and switch to minified for production.

-2 Don't nest your controllers. You have data-ng-controller="SimpleController" in both your <body> tag and its child div you only need to declare it once. Also there is a typo in your <body> tag not sure if it was just when you cpoied your code over.

-3 I'm not sure what version of Angular you're using but I believe in the latest version, ngRoute is not included so you have to declare it as a dependency of your app as such var demoApp = angular.module('demoApp', ['ngRoute']). I'm not sure, but I believe this is the source of your error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.