我正在尝试学习angularJS的路线特征,但到目前为止我所做的一切都不起作用。
如果我单击“加载”、“显示”或“播放”(在我的示例中:指向可能的操作URL的链接)
然后
<div ng-view></div>
仍然存在于DOM中(当我检查它时),而且它不会被路由提供程序的templateUrl中指示的相关html部分文件所取代。
Chromium日志控制台显示一个错误:
Uncaught ReferenceError: LoadCtrl is not defined from my_app
如果我把所有的
when
在定义路由提供程序的注释中,则不再抛出错误。
所以我认为这可能取决于控制器关于路由提供者定义的定义顺序。所以我试着把它们放在之前或之后,也放在一个单独的controllers.js文件中。。。但这并不能改变任何事情。
我想我犯了一个明显的错误,但我抓不住。知道吗?
的内容
index.html
:
<!DOCTYPE html>
<html ng-app="my_app">
<body>
<section class="section_command">
<ul>
<li><a href="#/load">Load file</a></li>
<li><a href="#/display">Display file</a></li>
<li><a href="#/play">Play file</a></li>
</ul>
</section>
<section class="section_content">
<div ng-view></div>
</section>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
的内容
app.js
:
var app = angular.module('my_app',[]);
app.controller('LoadCtrl', function($scope, $http, $routeParams){});
app.controller('DisplayCtrl', function($scope, $http, $routeParams){});
app.controller('PlayCtrl', function($scope, $http, $routeParams){});
app.config(['$routeProvider', function($routeProvider)
{
$routeProvider.
when('/load', {templateUrl: 'partials/load.html', controller: LoadCtrl}).
when('/display', {templateUrl: 'partials/display.html', controller: DisplayCtrl}).
when('/play', {templateUrl: 'partials/play.html', controller: PlayCtrl}).
otherwise({redirectTo: '/'});
}]);
部分html文件非常简单:
load.html
:
<span>Loading</span>
display.html
:
<span>Displaying</span>
play.html
:
<span>Playing</span>
