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

Question

我已经实现了解决此问题的代码。 问题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>

Answer 1

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

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

Answer 2

文件的顺序应该是jquery ，然后是angular，然后是模块文件。

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

第二，您包含了angular ，它也是独立的，但是由于您将其与jquery一起使用，因此您希望angular知道jquery可用，以便angular可以利用jquery的功能。

第三是您的脚本，因为它应该在已解析角度时进行解析（因为只有角度代码才有意义）

更新：

您需要将模块定义为
var CustomerSearch = angular.module（'module_name'）
并在使用前将其存储在某个变量中。 我看不到您的代码（我可能不正确，因为我不知道打字稿（或您使用的语法是什么），但是您可以检查变量是否已定义）
现在，执行此操作的文件应该位于jQuery和angularJS之后的所有JS文件的顶部。 这将使您在尝试使用模块之前先进行定义。

Answer 3

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

1）“删除”角度脚本参考，或者
2）只需将其放在模块后面的“最晚”位置即可。

有一个坏掉的punker ，它将为我们提供此错误：

未捕获ReferenceError：未定义角度

因为我们跳过了角度脚本

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

如果将角度放置在页面中太晚（在模块定义之后 ），我们将面临相同的问题（还有许多其他错误 ）。 检查这个坏的例子

未捕获的ReferenceError：未定义角度（匿名函数）@ 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'不可用！ 您可能拼错了模块名称，或者忘记了加载它。 如果注册模块，请确保将依赖项指定为第二个参数。

这可能是由于我们自己的脚本放置错误导致的：

<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');

因此，我们需要先进行声明

延伸：

该代码段来自问题：

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

Answer 4

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

该错误与我们的设置有关

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

有一个破碎的例子 -这将给我们这种错误：

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

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

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

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

缺少通话app.controller("")

这个工作正常的人有这样的定义：

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

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

问题描述

4 个解决方案

解决方案1
2 2015-06-01 10:50:36

解决方案2
1 2015-06-01 10:46:44

解决方案3
1 已采纳 2015-06-02 08:26:25

解决方案4
1 2015-06-02 09:21:12

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

问题描述

4 个解决方案

解决方案1 2 2015-06-01 10:50:36

解决方案2 1 2015-06-01 10:46:44

解决方案3 1 已采纳 2015-06-02 08:26:25

解决方案4 1 2015-06-02 09:21:12

解决方案1
2 2015-06-01 10:50:36

解决方案2
1 2015-06-01 10:46:44

解决方案3
1 已采纳 2015-06-02 08:26:25

解决方案4
1 2015-06-02 09:21:12