在AngularJS中使用RequireJS从路由调用控制器时出错
在AngularJS中使用RequireJS从路由调用控制器时出错
提问于 2014-06-09 02:03:44
我的index.html有如下标记(尽管只需要代码)
index.html
<html>
<body>
<div><ng-view></ng-view></div>
<script src="config.js"></script>
<script data-main="app" src="bower_components/requirejs/require.js"></script>
</body>
</html>search.html
<div>{{ person.name }}</div>config.js
"use strict";
var require = {
paths: {
"jQuery": "bower_components/jquery/dist/jquery.min",
"angular": "bower_components/angular/angular.min",
"angular-route": "bower_components/angular-route/angular-route.min",
"angular-mocks": "bower_components/angular-mocks/angular-mocks",
"angular-resource": "bower_components/angular-resource/angular-resource.min"
"components": "components"
},
shim: {
"jQuery": {"exports": "jQuery"},
"angular": {"exports" : "angular"},
"angular-route": ["angular"],
"angular-mocks": { deps: ["angular"], "exports": "angular.mock" },
"angular-resource": ["angular"]
},
priority: ["angular"]
};app.js
"use strict";
define("app", ["angular", "routes", "angular-resource", "angular-route", "jQuery"], function (angular, routes) {
var app = angular.module("app", ["ngResource", "ngRoute"]);
angular.element().ready(function() {
angular.bootstrap(document, ["app"]);
});
return app;
});routes.js
"use strict";
require(["app", "components/search/search-ctrl"], function(app) {
return app.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/", {
controller: "SearchCtlr",
templateUrl: "/app/partials/search.html"
}).
otherwise({redirectTo: '/'});
}]);
});search-ctrl.js
'use strict';
define("search", ["angular", "angular-resource"], function(angular) {
var search = angular.module('search', []);
return search;
});
require(["search"], function(search) {
search.controller("SearchCtlr", ["$scope", function ($scope) {
$scope.person = {
name: "Blah"
};
}]);
});我所犯的错误是
Error: [ng:areq] http://errors.angularjs.org/1.3.0-build.2801+sha.ff791c9/ng/areq?p0=SearchCtlr&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at http://localhost:8000/app/bower_components/angular/angular.min.js:6:472
at Hb (http://localhost:8000/app/bower_components/angular/angular.min.js:20:239)
at Ta (http://localhost:8000/app/bower_components/angular/angular.min.js:20:326)
at http://localhost:8000/app/bower_components/angular/angular.min.js:69:56
at link (http://localhost:8000/app/bower_components/angular-route/angular-route.min.js:7:248)
at x (http://localhost:8000/app/bower_components/angular/angular.min.js:55:371)
at g (http://localhost:8000/app/bower_components/angular/angular.min.js:48:280)
at http://localhost:8000/app/bower_components/angular/angular.min.js:47:398
at http://localhost:8000/app/bower_components/angular/angular.min.js:49:227 如果我退出元素，错误就消失了，尽管html是从视图properly.Maybe加载的，但我设置的搜索组件出错了吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-09 02:38:20
模块需要工作的角度和需求，您的模块只是通过需求链接。改为：
app.js
define("app", ["angular", "routes", "angular-resource", "angular-route",
"jQuery", "components/search/search-ctrl"], function (angular, routes) {
var app = angular.module("app", ["ngResource", "ngRoute", "app.search"]);
angular.element().ready(function() {
angular.bootstrap(document, ["app"]);
});
return app;
});search-ctrl.js
'use strict';
define("search", ["angular", "angular-resource"], function(angular) {
var search = angular.module('app.search', []);
return search;
});
require(["search"], function(search) {
search.controller("SearchCtlr", ["$scope", function ($scope) {
$scope.person = {
name: "Blah"
};
}]);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24112790
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号