Angular路由1.6求助

Question

在构建这个网站时，我采用纯 JS 方法进行交互。但现在我也在尝试实现 Angular，特别是对于路由。

但是我是 angular 的新手，正在为路由问题苦苦挣扎。我想要发生的是在导航中单击新页面后将新部分 html 加载到 <div ng-view="">。

这是控制台中的错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module stretchFlexViewer due to: Error: [$injector:nomod] Module 'stretchFlexViewer' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这是我的 plunkr。

http://plnkr.co/edit/F6rRQcQtA8lNgLCKmoEj?p=preview

app.js

(function() {
  angular.module("app", ["ngRoute", "app.homeCtrl","app.stretchProdCtrl"])

  .config(function($routeProvider) {

    $routeProvider
      .when("/home", {
        controller: "homeCtrl",
        templateUrl: "home.html"
      })
      .when("/stretchProd", {
        controller: "stretchProdCtrl",
        templateUrl: "stretchProd.html"
      })
      .when("/science", {
        templateUrl: "/science.html"
      })
      .otherwise({
        redirectTo: "/home"
      });
  });
})();

index.html

<!DOCTYPE html>
<html ng-app="app" lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script data-require="angular.js@2.0.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://unmillennials.com/but.css" />
    <title>Stretch Flex</title>
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top col-xs-12 no-pad">
      <div class="container col-xs-12">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">StretchFlex</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li>
              <a href="http://stretchflex.net">Home</a>
            </li>
            <li>
              <a class="menu_item" href="stretchProd.html">Stretch Producer</a>
            </li>
            <li>
              <a class="menu_item" href="science.html">Science</a>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>
    <div ng-view=""></div>
  </body>

</html>

homeCtrl

var app = angular.module('stretchFlexViewer', []);

app.controller('homeCtrl', function($scope) {

  console.log('This is a test');

});

home.html

  <section id="content">
    <div class="col-md-12 col-xs-12 no-pad top-block">
      <img class="top-photo col-lg-12 col-xs-12 no-pad" src="http://stretchflex.net/photos/img5.jpg" alt="tennis" width="100%" />
    </div>
    <div class="comp-name">
      <span class="lightBlue" style="color:#87CEEB;">Stretch</span><span style="color: #D3D3D3;">Flex</span>
    </div>
    <div class="comparison parent">
      <div class="col-md-4 col-xs-12 no-pad mov">
        <div class="bordered-image child first">
          <span class="stance-area">
            <div class="col-md-8 col-xs-8 no-pad">
              <img class="stance" src="http://stretchflex.net/stanceJaphet.jpg" min-height="50%" width="85%"/>
            </div>
            <div class="col-md-4 col-xs-4 no-pad ang1">
              <img class="angle-japhet one"  src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
            </div>
          </span>
          <span class="stance-area">
            <div class="col-md-8 col-xs-8  no-pad">
              <img class="stance" src="http://stretchflex.net/stanceBaez.jpg" min-height="50%" width="85%"/>
            </div>
            <div class="col-md-4 col-xs-4 no-pad ang2">
              <img class="angle-japhet one"  src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
            </div>
          </span>
        </div>
      </div>
      <div class="col-md-4 col-xs-12 no-pad mov">
        <div class="bordered-image child second">
          <span class="swing-area">
            <div class="col-md-8 col-xs-8 no-pad">
              <img class="swing" src="http://stretchflex.net/japhet1.jpg" min-height="50%" width="86%"/>
            </div>  
            <div class="col-md-4 col-xs-4 no-pad ang3">
              <div class="red-ex">  
                <span class="red">&#10008;</span>
              </div>
              <div class="sec-ang-3">
                <img class="angle-japhet sec" src="http://stretchflex.net/photos/japhetAngle.png" min-height="25%" width="100%" />
              </div>
            </div>
          </span>
          <span class="swing-area jav">
            <div class="col-md-8 col-xs-8 no-pad">
              <img class="swing" src="http://stretchflex.net/javier1.jpg" min-height="50%" width="86.5%"/>
            </div>
            <div class="col-md-4 col-xs-4 no-pad ang4">
            <div class="green-check">
                <span class="green">&#10004;</span>
              </div>
              <div class="sec-ang-4">
                <img class="angle-japhet sec" src="http://stretchflex.net/photos/javierAngle.png" min-height="25%" width="100%" />
              </div>
            </div>
          </span>
        </div>
      </div>
      <div class="col-md-4 col-xs-12 no-pad">
        <div class="bordered-image child description third">
        <div class="col-md-12 col-xs-12 delt" style="text-align: center;">
          <h1>`\Delta degrees`</h1>
        </div>
          <div class="metrics">
            <table class="fir">
              <tr class="fir col-xs-12">
                <th class="fir col-xs-6">Name</th>
                <th class="fir col-xs-6" style="padding-left: 100px;">Height</th>
              </tr>
              <tr class="fir col-xs-12">
                <td class="fir col-xs-6">Japhet Amador</td>
                <td class="fir col-xs-6" style="padding-left: 118px;">6'4"</td>
              </tr>
              <tr class="fir col-xs-12">
                <td class="fir col-xs-6">Javier Baez</td>
                <td class="fir col-xs-6" style="padding-left: 118px;">6'0"</td>
              </tr>
              </table>
              <table class="sec col-xs-12">
              <tr class="sec col-xs-12">
                <th class="sec col-xs-6">Weight</th>
                <th class="sec col-xs-6" style="padding-left: 40px;">Home Runs (2014)</th>
              </tr>
              <tr class="sec col-xs-12">
                <td class="sec col-xs-6">310</td>
                <td class="sec col-xs-6" style="padding-left: 125px;">14</td>
              </tr>
              <tr class="sec col-xs-12">
                <td class="sec col-xs-6">190</td>
                <td class="sec col-xs-6" style="padding-left: 125px;">32</td>
              </tr>
          </table>
        </div>
        <div class="pelvis">
          <img class="pelvis-1" src="http://stretchflex.net/pelvis1.jpg" />
          <img class="arrow" src="http://stretchflex.net/rotArrow4.jpeg" />
          <img class="pelvis-2" src="http://stretchflex.net/pelvis2.jpg" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-12 no-pad" style="height: 300px;">
  <div class="started col-md-8 col-md-offset-2 col-xs-12">
    <a href="http://stretchflex.net/AppPt1(revised).html" class="button button-glow button-border button-rounded button-primary">Get Started</a>
</div>
</div>
</section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

任何建议都很好。

Answer 1

这是工作plunkr

所做的更改：

<html ng-app="app" lang="en"> 你的主模块名称是app.
包含脚本。

脚本：

<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"> .   </script>
<script data-require="angular-route@1.6.0" data-semver="1.6.0" src="https://code.angularjs.org/1.6.0/angular-route.js"></script>
<script src="app.js"></script>
<script src="homeCtrl.js"></script>
<script src="stretchProdCtrl.js"></script>

声明了 app 的一个依赖项。

模块定义：

angular.module("app", ["ngRoute"]) // ng-app="app" to match here

像这样引用该模块：

参考主模块：

angular.module("app").controller('homeCtrl'

Angular路由1.6求助

Angular Routing 1.6 assistance

html

javascript

jquery

angularjs

angularjs-1.6