我创建了一个网络应用程序，它运行良好。现在我需要使用稍微不同的控制器创建几乎完全相同的 html 页面。我正在尝试使用 ngRoute 但它不起作用，我也不是 100% 相信我的路线会得到我想要的结果。
当我尝试运行我的代码时，我收到此错误：无法实例化模块 ngRoute 由于：错误：[$injector:nomod] 模块 'ngRoute' 不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
编辑：我已将 Angular-route.js 添加到我的索引文件中，现在出现错误“未知提供者：$routeProvider”
有人能告诉我为什么我的路线不起作用吗？
这是我的代码：
app = angular.module('rcr_sched', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider){
When('/',{
templateUrl: 'index.html',
controller: 'main'
}).
When('/drill',{
templateUrl: 'drill.html',
controller: 'drill'
}).
otherwise({
redirectTo: '/'
});
}
]);
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/domo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="rcr_sched" ng-controller="main">
<div id="mydiv" ng-view>
<table>
<tr>
<th id="printc"><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
<th ng-repeat="prop in columns">{{prop.date}}</th>
</tr>
<tr ng-repeat="r in data">
<td id="linkc">
<button id="link" class="fa fa-plus-square fa-1x" onclick="href='#/drill'"></button>
</td>
<td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
{{r[prop2.title]}}
</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/domo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="rcr_sched" ng-controller="main">
<div id="mydiv">
<table>
<tr>
<th><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
<th ng-repeat="prop in columns">{{prop.date}}</th>
</tr>
<tr ng-repeat="r in data">
<td>
<button id="link" class="fa fa-plus-square fa-1x" onclick="href='#/'"></button>
</td>
<td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
{{r[prop2.title]}}
</td>
</tr>
</table>
</div>
</body>
</html>
您需要在代码中更改以下内容：
您只需要在单根 HTML 中导入文件（应该是index.html）。
angular.js 文件需要在任何其他文件之前导入，在您的情况下 angular-route.js
应该只有 1 个ng-app标签，从drill.html
不需要ng-controller在 html中提供，因为这已经在route config.
将您的路线index.html与路由分开，您可以default route(/)在其他文件中取出必要的部分。就像是home.html
将该<table>.../<table>部分放入单独的路由 html 文件 ( home.html, drill.html) 中，这ng-view将照顾..
例如，请参阅此Plunker。
基本上你的应用程序路由应该只在里面ng-view，在一般模板中，如：
<body>
<header>
<h1>App title</h1>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/drill">drill</a></li>
</ul>
</header>
<div class="content">
<div ng-view></div>
</div>
</body>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句