在构建这个网站时，我采用了纯 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">✘</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">✔</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>
任何建议都会很棒。
最佳答案
这是工作 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'
关于javascript - Angular Routing 1.6 帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41786549/