带有 Typescript 错误的 Angularjs：[ng:areq] 参数“IndexViewModel”不是函数，未定义答案

【问题标题】：Angularjs with Typescript Error: [ng:areq] Argument 'IndexViewModel' is not a function, got undefined带有 Typescript 错误的 Angularjs：[ng:areq] 参数“IndexViewModel”不是函数，未定义
【发布时间】：2015-02-21 22:09:39
【问题描述】：

尝试一个简单的 HTML TypeScript 应用程序，但在尝试将 Angularjs 集成到解决方案中时无法克服主题中指出的这个错误。基本上，我有一个简单的 index.html 页面如下：

<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script data-require="angular.js@*" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="Infrastructure.IndexViewModel">
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>


</body>
</html>

我创建了一个名为 IndexViewModel 的简单类，如下所示：

模块 LogsModule { 导出类 LogsViewModel { 构造函数（$scope：ng.IScope，$http：ng.IHttpService）{ console.info("日志视图模型构建。"); } } }

我还设置了 Visual Studio 设置以确保将所有 TypeScript 文件合并到一个 JavaScript 文件中。

当我运行应用程序时，我收到错误：

Error: [ng:areq] Argument 'Infrastructure.IndexViewModel' is not a function, got undefined
http://errors.angularjs.org/1.3.13/ng/areq?p0=Infrastructure.IndexViewModel&p1=not%20a%20function%2C%20got%20undefined
    at angular.js:63
    at assertArg (angular.js:1580)
    at assertArgFn (angular.js:1590)
    at angular.js:8431
    at angular.js:7599
    at forEach (angular.js:331)
    at nodeLinkFn (angular.js:7586)
    at compositeLinkFn (angular.js:7078)
    at compositeLinkFn (angular.js:7081)
    at publicLinkFn (angular.js:6957)

我已经引用了 this 和 this 等，但仍然感到困惑。我错过了什么？

【问题讨论】：

标签： javascript angularjs typescript

【解决方案1】：

错误清楚地表明角度控制器未注册到角度应用程序。

通过查看您的代码，您没有创建角度模块。这就是为什么您将ng-app="" 定义为空白并且您正在尝试使用全局功能。在 Angular 版本 1.3 以上，您需要使用 angular.module() 来定义您的应用程序，默认情况下全局函数是关闭的。

下面是定义angular.module的代码

代码

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

app.controller('Infrastructure.IndexViewModel',function($scope){
   //controller code here
});

HTML

<html lang="en" ng-app="app">

Example Plunkr

更新

简述 Angular JS 在页面上的工作原理？

Angular 首先获取 html 页面的内容。
它收集了页面的所有角度指令，如ng-app、ng-init、ng-model等。
之后，它使用$compile 服务编译页面元素，并按照上面提到的优先级调用指令。（所有元素都使用$compile 服务加载到 HTML 页面上）
首先会执行ng-app 指令，在我们的例子中它搜索提到的模块是app。（你有这个错误）
在编译阶段指令compile 函数被调用（如果它们存在）。
在渲染 ng-controller 指令时加载该角度控制器。
随着控制器加载其 DOM，相应的指令链接函数被调用。（如果有的话）

您应该使用angular.element(document).ready(function() {}) 函数而不是window.load，就像我们使用document.ready refer link 一样，或者更好地使用window.onload。从window.onload 创建应用程序时，您不应在页面上提及ng-app="app"，这会破坏页面，并会给出与您现在得到的相同的错误（请参阅第 4 点）。使用angular.bootstrap在页面上初始化应用程序，在声明所有模块后，这将在页面上初始化角度（延迟加载）。

代码

//same can be do able with window.onload
  angular.element(document).ready(function() { 
    var app = angular.module('app', []);
      app.controller('Infrastructure.IndexViewModel', function() {
      });
    //bootstraping app on page
    angular.bootstrap(document,['app'])
  });

HTML（不要提及ng-app）

<div ng-controller="Infrastructure.IndexViewModel">
  <input type="text" ng-model="test" />{{test}}
</div>

并且在页面上初始化angular没有具体的方法，可以使用seft执行函数或者正常添加全局函数。

Updated Plukr

希望对您有所帮助，谢谢。

【讨论】：

初始化代码放哪里最合适？您的示例使用自执行功能。我在 window.load 事件处理程序中有相同的代码，并收到模块“app”未注册的错误。

【解决方案2】：

我创建了一个名为 IndexViewModel 的简单类，如下所示：模块 LogsModule { 导出类 LogsViewModel { 构造函数($scope: ng.IScope, $http: ng.IHttpService) { console.info("构建的日志视图模型。"); } } }

该类称为LogsViewModel，它位于LogsModule。所以ng-controller="Infrastructure.IndexViewModel"> 应该是ng-controller="LogsModule.LogsViewModel">

【讨论】：