AngularJS Маршрут-провайдер не работает

Я новичок в AngularJS и пытаюсь создать одностраничный сайт на основе учебника Charney Kaye. Теперь я создал веб-сайт, насколько я понял, и он начинается как intendet, однако навигация, похоже, не загружает qequested partial, но пытается ссылаться на путь к новому полному html-файлу.AngularJS Маршрут-провайдер не работает

Я уверен, что я просто пропустил крошечную вещь, но, похоже, я не могу вставить в нее булавку. Поэтому я был бы готов к любому намеку, который мог бы получить.

код я сделал до сих пор:

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."); 


});

Плюс взыскательных частичные для сайтов I wand to дисплей. Но, как сказано ранее, он не пытается загрузить частичные данные, но путь, основанный на том, что буквально написано за href=

Как я уже сказал, любая помощь приветствуется, поэтому благодарим вас за ваше время и за чтение.

источник

2017-01-28 Akunosh

пытаются использовать href="#/about" Маршрутизация работает с #

и если вы используете угловые 1,6 добавьте ниже для удаления «!»

app.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]);

источник

2017-01-28 13:54:10

У меня было это # / в более раннем attepmt, и я попытался снова, но это только приводит к изменению URL-адреса с 'http: //127.0.0.1: 8080/#! /' На 'http: //127.0. 0.1: 8080/#!/#% 2Fabout', ничего не происходит с отображаемой страницей. – Akunosh

Я обновил свой ответ. с обновленным ответом на использование http://127.0.0.1:8080/#/about –

Я попытался скопировать ваш код итеративно в любой из данных файлов, но это ничего не изменило для меня. Может быть, я упустил некоторые фундаментальные неувязки для углового здесь. Также triet do, но int в один вызов, как этот 'App.config (['$ routeProvider', '$ locationProvider', функция AppConfig ($ routeProvider, $ locationProvider)' без везения – Akunosh

Это тихий уныние, но путь ответа в порядке использования файлов JavaScript в index.html.

Ввод <script src="js/main.js"></script> на последнем месте, похоже, устранил проблему.

источник

2017-01-28 14:51:04 Akunosh

AngularJS Маршрут-провайдер не работает

ответ

Смежные вопросы