Javascript ng包括但不包括角度中的页面
在这里，我检查了许多问题，我尝试了相同的问题，但没有运气。我只是在html页面中包含ng include，但它并没有在代码中添加该页面 这是我的index.htmlJavascript ng包括但不包括角度中的页面,javascript,angularjs,Javascript,Angularjs,在这里，我检查了许多问题，我尝试了相同的问题，但没有运气。我只是在html页面中包含ng include，但它并没有在代码中添加该页面 这是我的index.html <!DOCTYPE html> <html lang="en" ng-app="confusionApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<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 -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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 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-include src="'contactUs.html'"></div>-->
<script type="text/ng-template" id="contactUs.html">
'use strict';
angular.module('confusionApp')
.controller('MenuController', ['$scope','menuFactory', function($scope,menuFactory) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
$scope.dishes=menuFactory.getDishes();
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
}
else if (setTab === 3) {
$scope.filtText = "mains";
}
else if (setTab === 4) {
$scope.filtText = "dessert";
}
else {
$scope.filtText = "";
}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];
$scope.channels = channels;
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback = function() {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
}
else {
$scope.invalidChannelSelection = false;
$scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
$scope.feedback.mychannel="";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
};
}])
.controller('DishDetailController', ['$scope','menuFactory', function($scope,menuFactory) {
$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
var stars=[{value:"1"
},
{
value:"2"
},
{
value:"3"
},
{
value:"4"
},
{
value:"5"
}
];
$scope.isSelected=function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"5",textComments:"",date:""};
$scope.submitComment = function () {
}
}])
;
'use strict';
angular.module('confusionApp')
.service('menuFactory',function(){
var dishes=[
{
_id=0,
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:"2015-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,
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:"2015-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,
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:"2015-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
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:"2015-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"
} ]
}
];
this.getDishes = function(){
return dishes;
};
this.getDish = function (index) {
return dishes[index];
};
}
);
如果没有web服务器为您的应用程序提供服务，
ng include跨源问题或文件：//
协议而限制加载模板
根据文件：
此外，浏览器的同源策略和跨源策略
资源共享（CORS）策略可能进一步限制
模板已成功加载。例如，ngInclude不适用于
所有浏览器上的跨域请求以及某些浏览器上的文件访问请求
浏览器
此外，请看：
TL；如果没有web服务器，DR-ng include将无法工作
注意：如链接中所述，有一种解决方法，您可以使用以下方法将模板包含在同一html文件中：
<script type="text/ng-template" id="sample.html">
<div>This is my sample template</div>
</script>
这是我的示例模板
如果没有web服务器为您的应用程序提供服务，ng include
将无法工作，因为某些浏览器会由于跨源问题或文件：//
协议而限制模板的加载
根据文件：
此外，浏览器的同源策略和跨源策略
资源共享（CORS）策略可能进一步限制
模板已成功加载。例如，ngInclude不适用于
所有浏览器上的跨域请求以及某些浏览器上的文件访问请求
浏览器
此外，请看：
TL；如果没有web服务器，DR-ng include将无法工作
注意：如链接中所述，有一种解决方法，您可以使用以下方法将模板包含在同一html文件中：
<script type="text/ng-template" id="sample.html">
<div>This is my sample template</div>
</script>
这是我的示例模板
尽管我不确定您的目录结构。因此，只需将您的contactUs.html
放在文件夹的同一级别，或在src中给出完整路径即可。比如说
--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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<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 -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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 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-include src="'contactUs.html'"></div>-->
<script type="text/ng-template" id="contactUs.html">
--ContuctUs.html
然后
在这种情况下，您必须在源代码中提供完整的路径，如
<ng-include src="'view/contactUs.html'"></ng-include>
尽管我不确定您的目录结构。因此，只需将您的contactUs.html
放在文件夹的同一级别，或在src中给出完整路径即可。比如说
--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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<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 -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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 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-include src="'contactUs.html'"></div>-->
<script type="text/ng-template" id="contactUs.html">
--ContuctUs.html
然后
在这种情况下，您必须在源代码中提供完整的路径，如
<ng-include src="'view/contactUs.html'"></ng-include>
您是否在服务器上运行应用程序？或者只是静态页面？普通静态页面您是否在服务器上运行应用程序？或者只是静态页面？正常的静态页面，谢谢你的解释。那么，我是否可以包含我的模板并检查？？在答案的末尾，我提到了一种方法，您也可以查看linkI添加的页面，作为id，然后我得到Script5022:[$injector:modulerr]？您可以用更改更新您的代码吗。。。这可能是由于其他一些错误。您是否在app.js中更改了某些内容，这看起来像是另一种类型的错误，与我们所做的更改无关。噢，谢谢您的解释。那么，我是否可以包含我的模板并检查？？在答案的末尾，我提到了一种方法，您也可以查看linkI添加的页面，作为id，然后我得到Script5022:[$injector:modulerr]？您可以用更改更新您的代码吗。。。这可能是由于其他一些错误。您是否在app.js中更改了某些内容，这看起来像是另一种类型的错误，与我们在同一文件夹的相同文件夹上所做的更改无关