我创建了一个网络应用程序，运行完美。现在我需要使用稍微不同的 Controller 创建几乎完全相同的 html 页面。我正在尝试使用 ngRoute 但它不起作用，我也不是 100% 相信我的路线会得到我想要的结果。
当我尝试运行代码时，出现此错误:无法实例化模块 ngRoute，原因是: 错误:[$injector:nomod] 模块“ngRoute”不可用!您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
编辑:我已将 Angular-route.js 添加到我的索引文件中，但现在收到错误“未知提供程序:$routeProvider”
有人可以告诉我为什么我的路线不起作用吗？
这是我的代码:
App.js(仅限路由部分)
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
<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
<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>
关于javascript - NgRoute 不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44590110/