角度布线不工作

我正在尝试使用 MEAN 堆栈构建我的第一个 Web 应用程序，但我遇到了 Angular 路由的问题。

<!-- public/index.html -->
<!DOCTYPE HTML>
<html lang="en" content-type="text/css">
<head name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<base href="/">
<title>Trova colori in tinta</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<link rel="stylesheet" href="normalize.css"> <!-- custom styles -->
<!-- JS -->
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/NerdCtrl.js"></script>
<script type="text/javascript" src="js/services/NerdService.js"></script>

<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body >
<div class="container" ng-app="sampleApp" ng-controller="NerdController">
<!-- HEADER -->
<nav class="navbar navbar-default" >
<div class="navbar-header">
<a class="navbar-brand" href="/">Colori</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li><a href="/nerd">Nerds</a></li>
<li><a href="/lacci">lacci</a></li>
</ul>
</nav>
<div class="container-fullwidth"></div>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>

当我单击"书"或"lacci"链接时，它不会显示这些页面。

这是文件应用程序路由.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/public/views/home.html',
controller: 'MainController'
}) // nerds page that will use the NerdController
.when('/nerds', {
templateUrl: '/public/views/nerd.html',
controller: 'NerdController'
}).when('/lacci', {
templateUrl: '/public/views/lacci.html',
}).otherwise({ redirectTo: "/home" });
$locationProvider.html5Mode(true);}]);

这两个文件位于不同的文件夹中。我错在哪里？

我想你忘了注入'ngRoute'

angular.module('appRoutes', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/public/views/home.html',
controller: 'MainController'
}) // nerds page that will use the NerdController
.when('/nerds', {
templateUrl: '/public/views/nerd.html',
controller: 'NerdController'
}).when('/lacci', {
templateUrl: '/public/views/lacci.html',
}).otherwise({ redirectTo: "/home" });
$locationProvider.html5Mode(true);}]);

在上面的代码中，您没有提到"ngRoute"依赖项。您需要将其添加到角度模块的空白数组中。

请使用本地服务器运行您的应用程序。不需要任何Tomcat服务器。您可以轻松下载谷歌浏览器插件"Chrome Web Server for Chrome"。这里- https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

你也可以在这里参考这个例子：https://plnkr.co/xRLK9DvPqSHOEtDuEbtZ '

<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.controller()
app.config(function($routeProvider) {
$routeProvider
.when('/abc', {
'template': "This is the ABC page"
})
.when('/Home', {
'template': "This is the home page"
})
.when('/About', {
'template': "This is the About page"
})
.when('/Contact', {
'template': "This is the Contact page"
})
.when('/Service', {
'template': "This is the Service page"
})
})
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Routing App</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#abc">Abc</a></li>
<li><a href="#About">About us</a></li>
<li><a href="#Service">Services</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div ng-view></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="script.js"></script>
</html>

相关内容

最新更新

热门标签：