0
私はAngularJSの新作で、Charney Kayeのチュートリアルに基づいて単一ページのWebサイトを構築しようとしています。今私はそれを理解し、intendetとして始まるウェブサイトを設定しましたが、ナビゲーションはqequested部分をロードしていないようですが、新しい完全なhtmlファイルへのパスを参照しようとします。AngularJS Route-Provider not working
私はちょっとしたことを逃したと確信していますが、ピンを入れることができないようです。だから、私は得るかもしれないヒントのためにすごいだろう。
私がこれまで行ってきたコード：
Index.htmlと
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<title>Zanas Wetter</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="ACME Inc.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<link rel="stylesheet" href="/vondor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/vondor/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/vondor/fonts_awesome/css/font-awesome.min.css">
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="WeatherApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Our Website Content Goes Here -->
<div ng-include='"templates/header.html"'></div>
<div ng-view></div>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="/vendor/angularjs/angular.min.js"></script>
<script src="/vendor/angularjs/angular-route.min.js"></script>
<!-- Our Website Javascripts -->
<script src="js/main.js"></script>
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../vendor/raphael/raphael.min.js"></script>
<script src="../vendor/morrisjs/morris.min.js"></script>
<script src="../data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/jquery.formatDateTime.min.js" type="text/javascript"></script>
<script src="../dist/js/wetterdienst.js"></script>
</body>
</html>
header.htmlを
<!-- Navigation -->
<nav class="navbar navbar-inverse">
<!-- Container -->
<div class="container">
<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="/"><i class="fa fa-cloud fa-fw"></i> Weather App</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="home">Home</a></li>
<li><a href="tinkerforge">Station</a></li>
<li><a href="datasearch">Datasearch</a></li>
<li><a href="about">About</a>
</li>
<!-- <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user fa-fw"></i> Mein Profil</a></li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Nutzer Verwaltung</a></li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Abmelden</a></li>
</ul>
</li> -->
</ul>
</div>
</div>
<!-- ./Container -->
</nav>
main.js
/**
* Main AngularJS Web Application
*/
var app = angular.module('WeatherApp', [
'ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("datasearch", {templateUrl: "partials/datasearch.html", controller: "PageCtrl"})
.when("tinkerforge", {templateUrl: "partials/tinkerforge.html", controller: "PageCtrl"})
.when("usercontrol", {templateUrl: "partials/usercontrol.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
/**
* Controls all other Pages
*/
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
console.log("Page Controller reporting for duty.");
});
プラスrequiered私が援助するサイトの部分表示。しかし、前に述べたように、パーシャルを読み込もうとしませんが、後ろに書かれた文字通りに基づいたパスです。href=
私が言ったように、どんな助けも歓迎されています。
私はそれ以前のattepmtで＃と書いていましたが、もう一度試しましたが、URLが 'http：//127.0.0.1：8080 /＃！/'から 'http：//127.0 'に変更されるだけです。 0.1：8080 /＃！/＃％2Fabout'と表示されたページに何も起こりません。 – Akunosh
答えを更新しました。更新された回答を使用http://127.0.0.1:8080/#/about –
私はあなたのコードを反復的に任意のファイルにコピーしようとしましたが、私のために何も変更されませんでした。多分私はここで角度のためのいくつかの基本的な未知を見逃しています。 また、この 'App.config（['$ routeProvider'、 '$ locationProvider'、AppConfig（$ routeProvider、$ locationProvider）関数' – Akunosh