Question

我正在尝试创建一个简单的Angular应用程序，以便在控制器中搜索数组中的名称。每次我运行应用程序时，我都会得到eroor＆＃39; Uncaught ReferenceError：angular is not defined＆＃39;在控制台中。我在网上看过类似的问题，但似乎没有任何内容可以涵盖我正在经历的事情。

我的HTML是......

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <link type="text/css" rel="stylesheet" href="../app/styles/styles.css"/>
        <script src="../scripts/controllers/mycontroller.js"></script>
        <a class="header" href="../app/index.html"><h1>App</h1></a>
    </head>
    <body>
        <div class="main-container">
            <div id="left"class="main">
                <h2>Search by:</h2>
                <a href="search-name.html">Name</a><br/><br/>
                <a href="search-salary.html">Salary</a><br/><br/>
                <a href="search-date.html">Date</a><br/><br/>
            </div>
            <div ng-controller="MyCtrl" id="middle" class="main">
                <h2>Search name</h2>
                <div>
                    <div>
                        <input type="text" style="color:black;" placeholder="Name here..." ng-model="userSearch">
                    </div>
                </div>
                <div>
                   <div ng-repeat="user in users | filter:userSearch">
                        <div>
                            {{user.firstname}} {{user.lastname}}
                        </div>
                    </div>
                </div>
                <button style="color:black;" >Go</button>
            </div>
            <div id="right" class="main">
                <h2>Sidebar</h2>
            </div>
        </div>
        <div id="footer">
            <a href="google.com">Link1</a>
            <a href="google.com">Link2</a>
            <a href="google.com">Link3</a>
            <a href="google.com">Link4</a>
            <a href="google.com">Link5</a>
        </div>
    </body>
</html>

我控制器的脚本是......

'use strict';

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

myApp.controller('MyCtrl', function ($scope) {

  $scope.users = [

    {firstname: 'john', lastname: 'smith'},
    {firstname: 'jane', lastname: 'due'},
    {firstname: 'bob', lastname: 'rand'}

  ];
});

我对Angular框架很新，所以如果我的帖子很愚蠢，请原谅。

非常感谢帮助，谢谢！

Answer 1

angular未定义，因为您从未包含它。

在控制器脚本之前添加以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

或者转到https://angularjs.org/并找到一种最适合您的Angular方法。

Answer 2

我认为这只是归结为对AngularJS模块如何工作的误解。

模块是Angular应用程序的顶级组件，可让您组织代码并关联HTML文档的区域。创建模块时，最多需要三个参数：

模块名称
模块所依赖的模块集。这是第二个参数，您错误地添加了控制器名称，为不存在的名为MyCtrl的模块创建依赖关系
模块的配置（与调用module.config相同）。

您犯的错误是您尝试将控制器名称传递给模块。控制器是一个二级组件，通过先调用模块绑定到模块。

您已使用为模块myApp定义的变量将控制器连接到模块。换句话说，你有：

myApp.controller('MyCtrl', function ($scope) { ...

你可以像以下一样轻松地写出：

angular.module('myApp').controller('MyCtrl', function ($scope) { ...

第一次定义模块时，必须为依赖项指定名称和第二个参数即使不存在依赖项。因此，在没有依赖项的情况下，只需传递一个带[ ]的空数组。如果不包含第二个参数，Angular将查找已使用该名称定义的模块。

未捕获的ReferenceError：未定义angular

2 个答案: