带有Typescript错误的Angularjs错误：[ng：areq]参数'IndexViewModel'不是一个函数，未定义

Question

当尝试将Angularjs集成到解决方案中时，尝试一个简单的HTML TypeScript应用程序并且无法克服此主题中指出的错误。 基本上，我有一个简单的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)

我曾引用这和本等等，但仍是一头雾水。 我错过了什么？

Answer 1

错误明确表明角度控制器未向角度应用注册。

通过查看代码，您没有创建angular模块。 这就是为什么您将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">

范例Plunkr

更新

在页面上简要介绍Angular JS的工作原理？

Angular首先获取html页面的内容。
它收集页面的所有角度指令，例如ng-app ， ng-init ， ng-model等。
之后，它使用$compile服务编译页面元素，并按照上述优先级调用指令（所有元素都使用$compile服务加载到HTML页面上）
首先执行ng-app指令，在我们的情况下搜索提到的模块是app 。 （您遇到此错误）
在编译阶段，将调用指令compile功能（如果存在）。
在渲染ng-controller指令时加载该角度控制器。
当控制器加载其DOM时，将调用相应的指令链接函数。（如果存在）

代替window.load您应该使用angular.element(document).ready(function() {})函数，就像我们使用document.ready 引用链接或更好地使用window.onload 。 从window.onload创建应用程序时，您不应在页面上提及ng-app="app" ，这会破坏页面，并会产生与立即获取相同的错误（参考点4）。 在声明所有模块后，使用angular.bootstrap初始化页面上的应用程序，这将初始化页面上的angular（延迟加载）。

码

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

而且，没有初始化页面上角度的特定方法，您可以使用seft执行函数或正常添加全局函数。

更新的Plukr

希望这可以对您有所帮助，谢谢。

Answer 2

我创建了一个简单的名为IndexViewModel的类，如下所示：模块LogsModule {导出类LogsViewModel {构造函数（$ scope：ng.IScope，$ http：ng.IHttpService） }}}

该类称为LogsViewModel及其在LogsModule 。 因此， ng-controller="Infrastructure.IndexViewModel">应该是ng-controller="LogsModule.LogsViewModel">

带有Typescript错误的Angularjs错误：[ng：areq]参数'IndexViewModel'不是一个函数，未定义

问题描述

2 个解决方案

解决方案1
1 2015-02-21 22:25:22

解决方案2
0 2015-02-23 01:04:22

带有Typescript错误的Angularjs错误：[ng：areq]参数&#39;IndexViewModel&#39;不是一个函数，未定义

问题描述

2 个解决方案

解决方案1 1 2015-02-21 22:25:22

解决方案2 0 2015-02-23 01:04:22

带有Typescript错误的Angularjs错误：[ng：areq]参数'IndexViewModel'不是一个函数，未定义

解决方案1
1 2015-02-21 22:25:22

解决方案2
0 2015-02-23 01:04:22