0
Ну, это тема, которую я видел много здесь, но не нашел никого, с конкретной проблемой я получил (или я не понимаю, как такое ..)угловых должным
Итак, я бы сказал, что я пытаюсь запустить свой SPA-сайт (не на каком-то сервере ..) Это, как я понял, отказал мне в использовании хрома/проводника и перешел на firefox :(
YET - происходит самая странная вещь - когда я нажимаю ссылки, которые предполагают правильно изменить адрес, добавляет только запись в конце.
Что мне делать ? когда я нажимаю ссылку она должна идти от:
файла: /// C: /Users/saartk/Desktop/Python/New/conFusion/app/index.html#/ContactUs
в : файла: /// C: /Users/saartk/Desktop/Python/New/conFusion/app/index.html#/меню
Вместо этого он становится: файл: /// C:/Пользователи/saartk/Desktop/Python/New/conFusion/app/index.html #!/contactus #% 2Fmenu Элемент меню добавлен к умолчанию, unyeilding , ContactUs ...
мой код выглядит следующим образом:
это мой HTML-файл (index.html): (Релевент часть является Navbar)
<!DOCTYPE html>
<html 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">
<title>Ristorante Con Fusion</title>
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body ng-app="confusionApp">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="#/"><img src="images/logo.png" height="30" width="41"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<div ng-view></div>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:[email protected]">
[email protected]</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
это ngRoute JS файл:
var app=angular.module('confusionApp',['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
// route for the contactus page
.when('/contactus', {
templateUrl : 'contactus.html',
controller : 'ContactController'
})
// route for the menu page
.when('/menu', {
templateUrl : 'menu.html',
controller : 'ctrlr'
})
// route for the dish details page
.when('/menu/:id', {
templateUrl : 'dishdetail.html',
controller : 'dishControl'
})
.otherwise('/contactus');
});
контроллеры:
'use strict'
var app=angular.module('confusionApp');
app.controller('ctrlr',['$scope','pizzaService',function($scope,pizzaService){
$scope.hide=true;
$scope.toggle=function(){
$scope.hide=!$scope.hide;
}
$scope.tab="";
$scope.yosi=pizzaService.getDishes();
$scope.select=function(setTab){
$scope.tab=setTab;
};
$scope.isSelected=function(checkTab){
return ($scope.tab==checkTab);
};
}]);
app.controller('ContactController',['$scope',function($scope){
$scope.feedback= {myChannel:"",firstName:"",lastName:"",agree:false,email:""};
$scope.channels=[{value:"Tel.",label:"Tele"},{value:"Email",label:"Mail"}];
$scope.notChosen=false;
}]);
app.controller('FeedbackController',['$scope',function($scope){
$scope.validate=function(){
console.log($scope.feedback);
if($scope.feedback.agree&&($scope.feedback.myChannel=="")){
$scope.notChosen=true;
console.log('incorrect');
}
else{
$scope.feedback= {myChannel:"",firstName:"",lastName:"",agree:false,email:""};
$scope.feedbackForm.$setPristine();
$scope.notChosen=false;
console.log($scope.feedback);
}
}
}]);
app.controller('dishControl',['$scope','$routeParams','pizzaService',function($scope,pizzaService,$routeParams) {
$scope.dish=pizzaService.getDish(parseInt($routeParams.id,10));
$scope.commentNew={
rating:4,
comment:"",
author:"",
date:""
};
$scope.isThis=function(num){
if(num==$scope.commentNew.rating){
return true;
}
else{
return false;
}
};
$scope.isCommentEmpty=function(){
if($scope.commentNew.comment==""){
return true;
}
else{
return false;
}
};
$scope.commentNow=function(){
$scope.commentNew.date=Date();
$scope.dish.comments.push($scope.commentNew);
$scope.commentNew={rating:4,comment:'',author:'',date:''};
$scope.dishForm.$setPristine();
};
}]);
и услуги (данные):
'use strict'
angular.module('confusionApp')
.factory('pizzaService',function(){
var object={};
var dishes=[
{
_id:0,
sort:'',
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2017-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:1,
sort:'',
name:'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2017-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:2,
sort:'',
name:'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2017-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:3,
sort:'',
name:'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2017-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
}
];
object.getDishes=function(){
return dishes;
};
object.getDish=function(num){
return dishes[num];
};
return object;
});
так ... что вы, ребята и девчата думаю проблема?
Большое спасибо заранее!
У меня была аналогичная проблема, когда я работал со старым угловым, но я не могу вспомнить, как я установил его. В ваших hrefs вместо использования «#/route», как он себя ведет, если вы используете «/ route»? – Zeokav
жаль, что я не получаю его, поскольку ваш пример, похоже, работает на моем конце .. я знаю, что вы ищете - http://imgur.com/a/NZV3e http://imgur.com/a/fhzSK – swapnesh
Чувак, вместо прямого использования от статических файлов, рассмотрите возможность использования легкого статического сервера, такого как «http-server» (npm) или простой phyttonHttpServer. У меня были похожие проблемы, когда я открывал статические файлы в своем браузере. Обе из вышеуказанной программы будут запускать ваш проект через порт (я думаю, что это 8080). Проверьте это и дайте понять, что это что-то изменило. – borislemke