带控制器的角度接线 - 初学者

时间:2013-11-15 16:52:32

标签: javascript jquery angularjs

我正在关注本教程:http://www.youtube.com/watch?v=i9MHigUZKEM

我是46:32分钟,到目前为止这是我的代码:

<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>

但是代码没有按预期工作。代码对我来说很好,但显然有些不对劲。我错过了导入或代码不正确&gt; 错误:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=demoApp&p1=Erro…paces%2F04072013%2FAngularJSFirst%2FWebContent%2Fangular.min.js%3A32%3A427) 

1 个答案:

答案 0 :(得分:2)

根据所有评论,这里的快速摘要可以解决您的问题(S)

-1在文档的<script src="angular.min.js"></script>或最后包含<head>。使用无歧义版本进行开发,并切换到缩小版本进行生产。

-2不要嵌套控制器。您的data-ng-controller="SimpleController"标记及其子<body>中都有div,您只需要声明一次。此外,您的<body>代码中还有一个拼写错误,不确定是否就是在您编写代码时。

-3我不确定您使用的Angular版本是什么,但我相信最新版本,不包含ngRoute,因此您必须将其声明为应用程序的依赖关系var demoApp = angular.module('demoApp', ['ngRoute'])。我不确定,但我相信这是你错误的根源。