我正在使用 Angular 和 Bootstrap 开发单页应用程序。但 ng-view 没有附加到index.html
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中我给出了 将我的代码附加到同一个
最佳答案
可能的原因是您的配置中的 templateUrl 和 Controller 之间没有逗号。 即 templateUrl:'contactUs.html', Controller :'ContactController'
关于javascript - ng-view 在 Angular 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37868207/