gpt4 book ai didi

javascript - Angular Routing 1.6 帮助

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:02 28 4
gpt4 key购买 nike

在构建这个网站时,我采用了纯 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>

任何建议都会很棒。

最佳答案

这是工作 plunkr

所做的更改:

  1. <html ng-app="app" lang="en">你的主模块的名称是app .

  2. 包含脚本。

脚本:

<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/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com