Question

我正在尝试使用Type Script + Angular Js.I已经声明了我的控制器和接口。但是当我试图运行我的系统时它会通过并且错误

未捕获错误：[$ injector：modulerr]无法实例化模块。

我已经阅读了所有但未能得到的确切问题是： - 我在下面提到了我的代码： -

我的观点页面

        <html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
     <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.min.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/Controller/CreateCustomerController.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/Interface/Interface.js" />

    <title>Create Customer</title>

</head>
<body>
    <div data-ng-app=" CustomerNew">
        <div id="page" style="width:90% ! important;" data-ng-controller="CreateCustomerCtrl as custom">

Please See Exception Here

Answer 1

真正的问题（不确定是否）是我们隐藏/重新定义模块定义。我们做了：

var app = angular.module("CustomerNew", ['ngRoute']);

和next / 之前

var CreateCustomerapp = angular.module("CustomerNew", []);

我们可以/必须只定义一次模块，然后只通过 getter 来询问它：

// firstly create
var app = angular.module("CustomerNew", ['ngRoute']);
...
// later get it
// var CreateCustomerapp = angular.module("CustomerNew", []); // setter
var CreateCustomerapp = angular.module("CustomerNew"); // getter

Answer 2

另一个问题可能是/将是加载到页面中的脚本的顺序。这是当前的（不工作）：

<head>
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>     
     // angular is not in play yet here   
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Controller/CreateCustomerController.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />
     // too late....
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.min.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />
     ...

我们应该使用这个定义顺序：

<head>
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>     


     // ANGULAR First
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.min.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />

     // angular is now ready to start solve app
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Controller/CreateCustomerController.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />
     ...

更新后......有3次定义角度：

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.min.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    ...

这不好（可能工作但不好）它应该只是一次

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    // just once
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    ...

现在所有代码都应按正确的顺序加载。但是因为它引发了错误......我能看到的其他问题是 Module.js

的内容

// this is typescript
((): void=> {
    var app = angular.module("CustomerNew", ['ngRoute']);
    app.config(CustomerNew.Routes.configureRoutes);
})()

应编译：

(function () {
    var app = angular.module("CustomerNew", ['ngRoute']);
    app.config(CustomerNew.Routes.configureRoutes);
})();

而且，我们需要UI-Router，而不是 ngRoute ：

(function () {
    var app = angular.module("CustomerNew", ['ui.router']);
    app.config(CustomerNew.Routes.configureRoutes);
})();

'ui.router'必须注入主模块。检查that example ...所有正在运行的

Answer 3

我解决了这个错误，因为我在我的表格标签之前声明了我的ng-app，但现在我做了更改并删除了在表格标签之前声明的div并将其应用为： - < / p>

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

     <dnn:DnnJsInclude runat="server" FilePath="/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
    <dnn:DnnJsInclude runat="server" FilePath="app/Controller/CreateCustomerController.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />

    <title>Create Customer</title>
</head>
<body>
       <form data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" name="form" class="css-form" novalidate >

AngulaJs + TypeScript：未捕获错误：[$ injector：modulerr]无法实例化模块

3 个答案: