Question

我是AngularJs的新人（几小时前开始），我试图在60分钟内完成AngularJs教学。但我被困在第一个控制器的例子上。这是我的代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular Js</title>
    <meta charset="iso-8859-1">

</head>
<body>

    <div class="container" data-ng-controller="CustomerController">
        <input type="text" ng-model="name"> {{name}}

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

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js"></script>

    <script>
        function CustomerController($scope) 
        {   
            $scope.customers = [
                {name:'Leonardo', city:'Phoenix'}, 
                {name:'Michelangelo', city:'Los Angeles'},
                {name:'Rafael', city:'New York'}, 
                {name:'Donatello', city:'Texas City'}
            ];
        }
    </script>
</body>
</html>

这是我从ChromeDev控制台获得的错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify th...<omitted>...2) angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:4003
forEach angular.js:328
loadModules angular.js:3964
createInjector angular.js:3904
doBootstrap angular.js:1500
bootstrap angular.js:1515
angularInit angular.js:1427
(anonymous function) angular.js:23362
trigger angular.js:2653
(anonymous function) angular.js:2933
forEach angular.js:328
eventHandler angular.js:2932

作为一个新手，我不想进入注射器或模块和东西。由于本教程仅适用于这段代码。

谢谢！

Answer 1

首先你定义了ng-app =＆＃34; myApp＆＃34;但你没有定义任何名为＆＃34; myApp＆＃34;的模块，所以只需使用ng-app。

第二，看起来你使用的角度版本1.3.0-beta.17如果你没有声明这样的模块就不起作用

angular.module（＆＃34; myApp＆＃34;，[]）

如果您想使您发布的示例工作，请使用不同的角度版本，例如1.2.5

这是您的代码jsbin的工作

Answer 2

我认为你应该总是声明至少一个模块。

尝试：

<script>

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

    function CustomerController($scope) 
    {   
        $scope.customers = [
            {name:'Leonardo', city:'Phoenix'}, 
            {name:'Michelangelo', city:'Los Angeles'},
            {name:'Rafael', city:'New York'}, 
            {name:'Donatello', city:'Texas City'}
        ];
    }
</script>

Answer 3

有两种解决方案：

首先，因为您的错误说：“模块'myApp'不可用！”。您首先需要定义模块myApp，以便angular可以实例化它。然后将控制器的构造函数添加到myApp模块using the .controller() method。

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

myApp.controller('CustomerController', ['$scope',
    function($scope) {
        $scope.customers = [{
            name: 'Leonardo',
            city: 'Phoenix'
        }, {
            name: 'Michelangelo',
            city: 'Los Angeles'
        }, {
            name: 'Rafael',
            city: 'New York'
        }, {
            name: 'Donatello',
            city: 'Texas City'
        }];
    }
]);

<强> DEMO

第二次 ，只需从您的myApp代码中删除<html>即可，所有内容都能正常使用

<html ng-app="">

<强> DEMO

AngularJs注射器模块错误

3 个答案: