requirejs角度似乎并没有注册控制器/服务的/ etc [英] requirejs angular doesn't seem to register controller / services / etc
问题描述
我有一个非常简单requirejs和角度演示程序。当我运行code，就好像角度不登记的HomeController（即使寿文件不运行和输出你好，从家居控制器）。这是令人沮丧得到一点关于如何解决这个没有调试信息。任何帮助将大大AP preciated！
在我的本地机器上，我收到此错误信息：
错误：[NG：AREQ]参数'的HomeController不是一个函数，得到了未定义
在Plnkr我得到不同的信息：
错误：[NG：AREQ]
这是plnkr链接 http://plnkr.co/edit/zNVIYckX5dAzV3CpEzXv？ p = preVIEW
的index.html
＆LT;机身NG-应用=应用程序＆GT;
＆LT; DIV NG控制器=HomeController的＆GT;
{{信息}} ＆LT; / DIV＆GT;
＆LT;脚本SRC =http://requirejs.org/docs/release/2.1.14/minified/require.js数据主要=main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
main.js
require.config（{
路径：{
jQuery的：//$c$c.jquery.com/jquery-2.1.1.min'，
角：//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min'，
angular.route：//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min
}，
垫片：{
角：{DEPS：jQuery的]，产品出口：角}，
angular.route：{DEPS：角]，产品出口：angular.route}，
}，
DEPS：应用程序，路线]
}）;//开球应用
需要（[应用，路线]）;
app.js
定义（[角]，函数（）{
$（身体）追加。（你好，从应用程序＆LT; BR /＆gt;中）;
返回angular.module（应用程序，['ngRoute']）;
}）;
routes.js
定义（路线，[应用，angular.route，HomeController中]，功能（应用程序）{
$（机构）追加（你好，从angular.route＆LT; BR /＆gt;中）。 的app.config（函数（$ routeProvider，$ locationProvider）{
$（机构）追加（$ routeProvider＆LT; BR /＆gt;中）;
$ locationProvider.html5Mode（真）;
$ routeProvider.when（/，{
templateUrl：家/ /home.html的，
控制器：HomeController的
}） }）;
}）;
homeController.js
定义（HomeController的，[应用]，功能（应用程序）{ $（身体）追加。（你好，从家居控制器＆LT; BR /＆gt;中）;
app.controller（HomeController中功能（$范围）{
$（身体）追加。（你好，从家居控制器身体LT; BR /＆gt;中）;
$ scope.message =在家控制器消息;
}）;
}）;
github上演示：的https：/ /github.com/zouhenry/angular-requirejs-demo
我想通了这个问题，并希望这个答案可以帮助别人那里。
问题是，当DOM就绪，将角度解析HTML并会尝试HomeController的结合到NG-控制器指令，甚至在HomeController的文件已被requirejs加载。
所以我落得这样做从本NG-应用指令
的index.html 。这是从加载页面时自动绑定到指令pvented角$ P $（我们将通过编程绑定应用程序的页面后）
＆LT;车身 NG-应用=应用程序＆GT;
由于我删除了NG-应用从HTML本身。我需要的应用程序编程绑定到HTML。
我这样做的 Main.js
//开球应用
需要（[应用，路线]，函数（）{
angular.bootstrap（文件，[应用]）;
}）;
最后一件事我所做的就是移动require.js头部，而不是保持它在体内（不知道这是必要的）。这是修订后的 index.html的
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本SRC =http://requirejs.org/docs/release/2.1.14/minified/require.js数据主要=main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=HomeController的＆GT;
{{信息}}
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I have a very simple requirejs and angular demo app. When I run the code, it's as if angular doesn't register the homeController (even tho the file does run and outputs "Hello from home controller"). It's frustrating to get little to no debug info on how to solve this. Any help would be greatly appreciated!
On my local machine, I am getting this error message:
"Error: [ng:areq] Argument 'HomeController' is not a function, got undefined"
On Plnkr I am getting a different message:
Error: [ng:areq]
This is the plnkr link http://plnkr.co/edit/zNVIYckX5dAzV3CpEzXv?p=preview
index.html
<body ng-app="app">
<div ng-controller="HomeController">
{{message}}
</div>
<script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
</body>
main.js
require.config({
paths: {
"jquery": '//code.jquery.com/jquery-2.1.1.min',
"angular": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min',
"angular.route": '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min'
},
shim: {
"angular": { deps: ["jquery"], exports: "angular" },
"angular.route": { deps: ["angular"], exports: "angular.route" },
},
deps: ["app", "routes"]
});
//kickoff the app
require(["app", "routes" ]);
app.js
define(["angular"], function () {
$("body").append("hello from app<br/>");
return angular.module("app", ['ngRoute']);
});
routes.js
define("routes", ["app", "angular.route", "homeController"], function(app) {
$("body").append("hello from angular.route<br/>");
app.config(function($routeProvider, $locationProvider) {
$("body").append("$routeProvider<br/>");
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "home/home.html",
controller: "HomeController"
})
});
});
homeController.js
define("homeController", ["app"], function (app) {
$("body").append("hello from home controller<br/>");
app.controller("HomeController", function ($scope) {
$("body").append("hello from home controller body<br/>");
$scope.message = "message from home controller";
});
});
github demo: https://github.com/zouhenry/angular-requirejs-demo
I have figured out the problem and hope this answer will help others out there.
The problem is when dom is ready, angular will parse the html and will try to bind HomeController to the ng-controller directive, even before the homeController file has been loaded by requirejs.
So what I ended up doing was removing the ng-app directive from index.html. This prevented angular from automatically binding to directives when the page is loaded (we will programmatically bind the application to the page later)
<body ng-app="app">
Since I removed ng-app from the Html itself. I need to programmatically bind the the app to html. I did this with in the Main.js
//kickoff the app
require(["app", "routes" ], function(){
angular.bootstrap(document, ["app"]);
});
Last thing I did was move the require.js to the head instead of the keeping it in the body (not sure if this was necessary). This is the revised index.html
<html>
<head>
<script src="http://requirejs.org/docs/release/2.1.14/minified/require.js" data-main="main.js"></script>
</head>
<body>
<div ng-controller="HomeController">
{{message}}
</div>
</body>
</html>
这篇关于requirejs角度似乎并没有注册控制器/服务的/ etc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
