角度路由不适用于具有相同模块名称的控制器
kam*_*808 4 javascript angularjs angular-routing
这是一个简单的角度应用程序,似乎在代码中有一个愚蠢的错误,我不太能解决它.问题在于路由.单击链接不会将我带到指定的模板URL,而是重新加载相同的index.html页面.
但是,地址栏中的链接更改为:
点击相应的链接.
的index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/myStats.js"></script>
<script src="js/controllers/mySports.js"></script>
</head>
<body>
<div class="container">
<a ng-href="#/stats">My Stats</a>
<a ng-href="#/sports">My Sports</a>
</div>
<div ng-view></div>
</body>
</html>
app.js
'use strict';
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/stats', {
templateUrl: 'partials/stats.html'
})
.when('/sports', {
templateUrl: 'partials/sports.html'
})
}]);
我希望我的目录结构没有问题:
编辑:
共享控制器代码,问题出在控制器中.它必须用具有相同名称的角度模块做一些事情,尽管这就是我的教学方式.
JS /控制器/ mySports.js
angular.module('myApp',[])
.controller('mySports',['$scope', function($scope){
console.log('just checking');
}]);
什么工作: 从mySports.js更改模块名称对myApp到mySports,然后注入mySports作为一个依赖app.js.
更新了app.js:
'use strict';
angular.module('myApp', ['ngRoute','mySports'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/stats', {
templateUrl: 'partials/stats.html'
})
.when('/sports', {
templateUrl: 'partials/sports.html'
controller: mySports,
})
}]);
编辑
还有什么问题是为什么要更改控制器的模块名称然后作为依赖项注入app.js？为什么不使用相同的模块名称？
您需要将ngRoute作为依赖项注入应用程序
更改
从:
angular.module('myApp', [])
至:
angular.module('myApp',['ngRoute'])
这是工作 Application
| 归档时间： |
|
| 查看次数： |
1315 次 |
| 最近记录： |