未定义 Angular 的错误和未捕获的错误：脚本 Angular Js 类型中没有模块答案

【问题标题】：Getting Error of Angular is not defined & Uncaught Error:No Module in type Script Angular Js未定义 Angular 的错误和未捕获的错误：脚本 Angular Js 类型中没有模块
【发布时间】：2015-08-14 18:55:02
【问题描述】：

我已经实现了一个我遇到这个问题的代码。问题 1：- 未捕获的 ReferenceError：未定义角度问题 2：-未捕获的错误：没有模块：CustomerSearch

我已经编写了我的代码：-

这是我的查看页面

<view>
   <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="QuickSearch.ascx.cs" Inherits="CustomerSearch.QuickSearch1" %>
    <!DOCTYPE html>
    <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

    <html >
    <head id="Head1" >
       <script src ="http://code.jquery.com/jquery-latest.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Contoller/QuickSearchController.js"  />
        <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Interface/module.js"  />
       <%-- <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app.routes.js"  />--%>

        <title></title>


        <script type="text/javascript">





        </script>
    </head>
    <body ng-app="CustomerSearch">
    <form id="form1" >
    <div>



    <div id="page"  ng-controller="CustomerCtrl as custom">

              <div id="menuleftcontent">
         <table>
                 <tr id="menu">
                               <td width="25px !important;"><input type="text" id="txtActId" value="Search" class="tftextinput2" ng-model="search.txtActId" />  </td>
                               <td><input type="button" value="Search"  class="tfbutton2" data-ng-click="search(search)" /> </td>

                         </tr>
                  <tr id="TableRow1">
                      <td colspan="2">
                          <asp:DropDownList ID="listCustomerType" runat="server" CssClass="dropdown" Width="194px" Height="27px" ng-model="search.listCustomerType">

                          </asp:DropDownList>
                      </td>
                      </tr>
              <tr>
                 <td colspan="2">
                     <input type="checkbox" id="checkActiveOnly"  class="NormalTextBox" value="Active Customers Only" ng-model="search.checkActiveOnly" />Active Customers Only
                    <br>
                      <input type="checkbox" id="checkParentsOnly" class="NormalTextBox" value="Parent Accounts Only" ng-model="search.checkParentsOnly" />Parent Accounts Only


                 </td>
             </tr>
            </table>

     <div >

    <div>
        <div>

【问题讨论】：

尝试在angular.js文件之后移动module.js
@pankajparkar 代码已编辑，通过新代码
@RadimKöhler 不仅这个错误一次又一次地发生，并且得到任何可以帮助我的答案。无法找到我错的地方
@Mico，真的很想帮忙，但我不确定我是否可以。无论如何，我试图展示我们如何面对一些问题，错误，与 plunkers ......希望它会给至少有一些见解......
又收到一个 No module: ngRoute 错误

标签： angularjs typescript

【解决方案1】：

我相信module.js 包含角度控制器代码，然后它在创建不同组件时使用角度对象。

module.js 应该移到angular.d.ts 文件之后

【讨论】：

【解决方案2】：

要重现此类问题，我们可以

1)“删除”角脚本参考，或
2) 只需将它放在我们模块之后的非常“late”位置。

有a broken plunker 会给我们提供这个错误：

未捕获的 ReferenceError：未定义角度

因为我们跳过了 Angular 脚本

<!--<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>-->        

<script src="MainApp.js"></script>
<script src="CustomerSearch.dirc.js"></script>

同样的问题（还有许多其他错误），如果我们太晚将 angular 放置在页面中 （在我们的模块定义之后）时间>。检查这个broken example

未捕获的引用错误：未定义角度（匿名函数）@ MainApp.js:1 未捕获的错误：[$injector:nomod] 模块“CustomerSearch”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

这句话是罪魁祸首：

<script src="MainApp.js"></script>

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  

<script src="CustomerSearch.dirc.js"></script>

如果页面中的所有内容都正确排序，它将起作用（这是WORKING plunker）：

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  
<script src="MainApp.js"></script>
<script src="CustomerSearch.dirc.js"></script>

这些是此类错误的标准问题...

另外，万一我们得到了

未捕获的错误：[$injector:nomod] 模块“CustomerSearch”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

这可能是由于我们的own scripts 放置错误造成的：

<script data-require="angular.js@*"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
  ></script>  

<script src="CustomerSearch.dirc.js"></script> 
<script src="MainApp.js"></script> // this one should be before the other one

因为 MainApp.js 定义了模块：

var app = angular.module('MainApp', [
  'CustomerSearch'
  ]);

angular.module('CustomerSearch',[])

CustomerSearch.dric.js 使用它们

var app = angular.module('CustomerSearch');

所以，我们需要先声明

扩展：

来自问题的这段代码sn-p：

<html >
<head id="Head1" >
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Contoller/QuickSearchController.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Interface/Interface.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.min.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.routes.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.module.js"  />
    <script src ="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

应该（我猜）重新组织：

<html >
<head id="Head1" >
    // THIS MUST be first
    <script src ="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

    // MODULES must be defined first    
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.module.js"  />


    // the rest most likely could be as is
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Contoller/QuickSearchController.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/Interface/Interface.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/Scripts/angular.min.js"  />
    <dnn:DnnJsInclude runat="server" FilePath="~/Portals/_default/Customer.Search/app/app.routes.js"  />

【讨论】：

Kohler 我已经更新了我的问题中的参考资料，请查看它。还有其他问题吗？你看到我的代码了吗？
我观察了您的更新.. 并尝试按照我的预期订购它。检查我的扩展答案。希望它会有所帮助。另外，请阅读我的回答。我向你展示了场景......有错误。这可以帮助您以后避免此类问题。请花点时间检查一下。
Kohler 解决了一些错误，但现在收到 Unknown provider: $controllerProvider from CustomerSearch 的错误
这是一个伟大的进步；）这种错误意味着，主模块引用的任何模块中都缺少这样的控制器......你能不能给我一个完整的错误（例如更新你的问题）
我创建了新的 plunkers、新的示例并添加了另一个描述最新问题的答案（使用控制器）。希望它会有所帮助。那将是我的全部，因为我会说现在您应该了解有关这些问题的所有信息。祝你好运，先生

【解决方案3】：

文件的顺序应该是 jquery，然后是 angular，然后是你的 module 文件。

说明：首先声明jquery，它是一个独立的库。

其次，你包括angular，它也是独立的，但是由于你是在jquery中使用它，你希望angular知道jquery是可用的，以便angular可以利用jquery的强大功能。 p>

第三个是你的脚本，因为它应该在它已经解析了角度时被解析（因为那时只有你的角度代码才有意义）

更新：

您需要将模块定义为

var CustomerSearch = angular.module('module_name')

并在使用之前将其存储在某个变量中。我看不到您的代码（我可能是错的，因为我不知道打字稿（或您使用的任何语法），但您可以检查变量是否已定义）
现在，您执行此操作的文件应该位于 jQuery 和 angularJS 之后的所有 JS 文件的顶部。这将在您尝试使用之前定义您的模块。

【讨论】：

我对代码做了一些更改，请查看@TheJugadGuru
我不知道打字稿，但是您指定的两个错误都是由于脚本的顺序造成的。请检查
我完成了仍然存在相同的错误...@TheJugadGuru
我已经用更多东西修改了答案，但我无法理解语法。这就像在黑暗中射击，希望你能击中目标:)

【解决方案4】：

未知的提供者几乎总是意味着：我们忘记注册我们的控制器（提供者）。

该错误与我们的设置有关

<div ... ng-controller="CustomerCtrl" ...

有a broken example - 这会给我们这种错误：

错误：[ng:areq] 参数 'CustomerCtrl' 不是函数，未定义

那么，我们的代码出了什么问题：

module CustomerSearch.controllers {
    var app = angular.module('CustomerSearch');

    export class CustomerCtrl {
        // ...
    }
    //app.controller("CustomerCtrl", CustomerSearch.controllers.CustomerCtrl);
}

缺少通话app.controller("")

这个WORKING plunker 有这个定义：

module CustomerSearch.controllers {
    var app = angular.module('CustomerSearch');

    export class CustomerCtrl {
        // ...
    }
    app.controller("CustomerCtrl", CustomerSearch.controllers.CustomerCtrl);
}

并且（一旦我们将控制器注册到我们的应用程序）当我们使用 search.aspx 与此行时没有错误：

<div id="page"  ng-controller="CustomerCtrl as custom">

【讨论】：