我正在开发一个单页应用程序,我打算保持尽可能多的模块化。此外,它将是一个相当大的应用程序,因此,我打算仅在加载关联视图时加载控制器。为了达到同样的目的,我以以下方式组织了我的代码:
app.js
var app = angular.module("app", ['ngRoute']).config(function($httpProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = "XMLHttpRequest";
$httpProvider.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded; charset=utf-8";
});
route.js
app.config(function($routeProvider) {
$routeProvider.when("/user/login", {
templateUrl: "/user/login.html",
controller: "LoginCtrl"
});
});
用户/login.html <script type="text/javascript" src="/js/user/login.js"></script>
<div>
<!-- Complete Login Form -->
</div>
js/user/login.js
app.controller("LoginCtrl", function() {
// Login related functionality
});
现在,我面临的问题是login.html
模板正在正确加载。同时,正在发送login.js
的请求并成功接收到响应。但是,我仍然从AngularJS得到错误,说LoginCtrl
是undefined
。我对此进行了研究,发现包含jQuery可以解决问题,但这并没有发生。我试着在login.js
文件中放一个简单的警报,但弹出窗口也没有出现。
在这件事上任何帮助都是非常感谢的。
您需要更改登录控制器的位置
app.config(function($routeProvider) {
$routeProvider.when("/user/login", {
templateUrl: "/user/login.html",
//controller: "LoginCtrl" // remove this
});
});
,并像这样替换HTML
<script type="text/javascript" src="/js/user/login.js"></script>
<div ng-controller="LoginCtrl">
<!-- Complete Login Form -->
</div>