Question

我创建了一个完美运行的网络应用。现在我需要使用略有不同的控制器创建几乎完全相同的html页面。我正在尝试使用ngRoute，但它不起作用，我也不是100％自信我的路线会得到我想要的结果。

当我尝试运行我的代码时，我收到此错误：由于以下原因导致无法实例化模块ngRoute：错误：[$ injector：nomod]模块'ngRoute'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

编辑：我添加了Angular-route.js我的索引文件，我现在收到错误“Unknown provider：$ 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: '/'
        });  

}
         ]);

的index.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>

Drill.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>

Answer 1

您需要更改代码中的内容：

您只需要以单根HTML格式导入文件（应为index.html）。
angular.js文件需要在任何其他文件之前导入，在您的情况下angular-route.js
应该只有1个ng-app代码，从drill.html
无需在html中提供ng-controller，因为这已在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>

Answer 2

路由器是一个单独的角度文件，应该在index.html中添加：

NgRoute不可用

App.js（仅限路线部分）

的index.html

Drill.html

2 个答案: