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

我已经实现了一个代码，我坚持这个问题。问题1:-未捕获的ReferenceError: angular未定义问题2:-Uncaught Error: No module: 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>

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

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

之后

要重现这种问题，我们可以

1)"remove" angular脚本引用，或者
2)只要把它放在非常"后期"位置，在我们的模块之后。

有一个坏掉的活塞将提供给我们这个错误:

Uncaught ReferenceError: angular is not defined

因为我们跳过了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放置在页面中太晚(在我们的模块定义之后)，我们将面临同样的问题(以及许多其他错误)。查看这个破碎的示例

Uncaught ReferenceError: angular is not defined(匿名函数)@ MainApp.js未捕获的错误:[$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>

在这种情况下，所有的正确排序在页面中，它将工作(这是工作柱塞):

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

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

解释:首先声明jquery，它是一个独立的库。

第二，你包含了angular，它也是独立的，但是因为你是和jquery一起使用它，你想让angular知道jquery是可用的，这样angular就可以利用jquery的强大功能。

第三个是你的脚本，因为它应该在已经解析过angular的情况下被解析(因为只有你的angular代码才有意义)

更新:

您需要将模块定义为
var CustomerSearch = angular.module('module_name')
并在使用之前将其存储在某个变量中。我看不到你的代码(我可能是错的，因为我不知道typescript(或任何你使用的语法)，但你可以检查变量是否被定义)
现在，你这样做的文件应该在jQuery和angularJS之后的所有JS文件的顶部。这将使您的模块定义之前，你试图使用它。

未知的提供商几乎总是意味着:我们忘记注册我们的控制器(提供商)。

这个错误与我们的设置有关

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

相关内容

最新更新

热门标签：