0
我正在使用angular和bootstrap在單頁應用程序上工作。但是NG-觀點並沒有連接到index.html的ng-view在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>
這裏是我的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');
})
};
這裏是我的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:""};
}])
這裏是我的service.js
'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];
};
}
);
;
在我的index.html我給 我的代碼連接到同一
請包括實際的html。 – ryanyuyu
這是一大代碼！我會減少到[mcve]（http://stackoverflow.com/help/mcve）。如果到那時你還沒有發現問題，你很可能會在這裏吸引很好的答案（而且你的問題會對未來的訪問者更有用）我不會去挖掘我的方式，這是肯定的... – Pevara
在來到SO之前的第一步，甚至Google搜索：打開瀏覽器的調試控制檯。這將有助於你，如果你無法解決它，給我們的信息也會對我們有幫助。 – Walfrat