0
Ich arbeite an einer einzelnen Seite Anwendung mit eckigen und Bootstrap. Aber ng-Ansicht Befestigung nicht auf die index.htmlng-view funktioniert nicht in Angular
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<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">
<!-- endbuild -->
</head>
<body>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<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>
</div>
</header>
<ng-view></ng-view>
<footer class="row-footer">
</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>
Hier ist mein app.js
'use strict';
angular.module('confusionApp', ['ngRoute']){
.config(function($routeProvider){
$routeProvider
.when('/contactUs',{
templateUrl:'contactUs.html'
controller :'ContactController'
})
.when('/menu',{
templateUrl:'menu.html'
controller :'MenuController'
})
.when('/menu/:id',{
templateUrl:'dishdetail.html'
controller :'DishDetailController'
})
.otherwise('/contactUs');
})
};
Hier ist meine controller.js
.controller('DishDetailController', ['$scope','menuFactory','$routeParams', function($scope,menuFactory,$routeParams) {
$scope.dish= menuFactory.getDish(parseInt($routeParams.id,10));
}])
.controller('DishCommentController', ['$scope', function($scope) {
//Step 1: Create a JavaScript object to hold the comment from the form
$scope.isSelected=function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"5",textComments:"",date:""};
}])
mein service.js Hier
'use strict';
angular.module('confusionApp')
.service('menuFactory',function(){
var dishes=[
{
_id=0,
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
]
},
{
_id=1,
comments: [
{
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:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
} ]
}];
this.getDishes = function(){
return dishes;
};
this.getDish = function (index) {
return dishes[index];
};
}
);
;
Und in meinem index.html gab ich zu meinen Code auf die gleiche
Bitte fügen Sie die tatsächliche HTML. – ryanyuyu
Das ist eine große Codewand! Ich würde das auf einen [mcve] reduzieren (http://stackoverflow.com/help/mcve). Und wenn Sie das Problem bis dahin nicht gefunden haben, werden Sie hier wahrscheinlich eine gute Antwort finden (und Ihre Frage wird für zukünftige Besucher nützlicher sein). Ich werde mich nicht durch diesen Code hindurcharbeiten, das ist sicher ... – Pevara
Der erste Schritt bevor Sie zu SO kommen und sogar googeln: Öffnen Sie die Debug-Konsole Ihres Browsers. Das hilft dir und wenn du es nicht lösen kannst, hilft uns auch die Nachricht. – Walfrat