带有Angular的HTML模板
[英]Html template with Angular
问题描述
How to use Html template instead of Jade in Angular Application. 
如何在Angular Application中使用HTML模板代替Jade。
layout.html: 的layout.html：
<body>
{% block content %}{% endblock %}
<h1>Hello!! whats up from layout</h1>
</body>
index.html: index.html的：
{% extends 'includes/layout.html' %}
{% block content %}
<section> <h1>hello</h1></section>
{% endblock %}
Server.js Server.js
app.set('views',__dirname + '/server/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');
app.get('*',function(req,res){
res.render('index');
});
But i am not getting output as expected, below is the snap of what i am getting in the browser. 但是我没有得到预期的输出，以下是我在浏览器中得到的快照。
{% extends 'includes/layout.html' %} {% block content %}
hello
{% endblock %}
I don't understand what i am missing. 我不明白我在想什么。
3 个解决方案
解决方案1
1 2014-12-17 05:55:34
Looks like you're not utilizing the proper view engine. 好像您没有使用适当的视图引擎。 See this article by Rod Dodson. 参见Rod Dodson的这篇文章 。 The crucial line is: 关键是：
app.set('view engine', 'ejs');
You have: 你有：
app.set('view engine','html');
This means express is simply rendering your EJS templates as raw HTML. 这意味着express只是将EJS模板呈现为原始HTML。 Make sure Express understands which view engine you want to use, and you should be set. 确保Express了解您要使用的视图引擎，并且应该对其进行设置。
解决方案2
0 2014-12-17 09:46:26
I have a nice little working MEAN stack application , and i believe it can be a good base for you to set up express/node app with AngularJS HTML templates. 我有一个不错的MEAN Stack 应用程序 ，我相信它可以为您使用AngularJS HTML模板设置express / node应用程序奠定良好的基础。
Even if your configured view engine in app.js (server.js or whatever name you call it) might be jade or EJS, Expressjs is quite flexible,you can still serve the HTML partials using AngualrJS routes. 即使您在app.js （server.js或您称之为的任何名称）中配置的视图引擎可能是玉器或EJS，Expressjs也相当灵活，您仍然可以使用AngualrJS路由来提供HTML局部代码。
So my base index.html looks something like this: 所以我的基本index.html看起来像这样：
NOTE: there are ways to efficiently load JS files, but since it's a small To-Do App. 注意：有一些方法可以有效地加载JS文件，但这是一个小型的To-Do应用程序。 so i am not going for it. 所以我不打算这样做。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<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>MEAN To Do Application </title>
<link href="vendor/flat-ui/css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="vendor/flat-ui/css/flat-ui.css" rel="stylesheet">
</head>
<body ng-controller="AppCtrl">
<div ng-include="'app/header.tpl.html'"></div>
<div ng-view class="container-fluid"></div>
<script src="vendor/flat-ui/js/vendor/jquery.min.js"></script>
<script src="vendor/flat-ui/js/vendor/html5shiv.js"></script>
<script src="vendor/flat-ui/js/vendor/respond.min.js"></script>
<script src="vendor/flat-ui/js/vendor/video.js"></script>
<script src="vendor/flat-ui/js/flat-ui.min.js"></script>
<script type="text/javascript" src="vendor/angular-full/angular.min.js"></script>
<script src="vendor/angular-full/angular-resource.min.js"></script>
<script src="vendor/angular-full/angular-route.min.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script src="common/socketservice.js"></script>
<script src="app/app.js"></script>
<script src="app/meetups/meetups.js"></script>
</body>
</html>
Then here comes by Angular routes config( refer ): 然后是Angular路由config（ 参考 ）：
angular.module('meetups',['ngResource'],['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'app/meetups/list.tpl.html',
controller: 'MeetupsController'
})
.when('/create',{
templateUrl : 'app/meetups/create.tpl.html',
controller: 'MeetupsController'
})
.when('/:id',{
templateUrl: 'app/meetups/details.tpl.html',
controller: 'MeetupsController'
})
.when('/:id/edit',{
templateUrl: 'app/meetups/edit.tpl.html',
controller: 'MeetupsController'
})
.otherwise({redirectTo: '/'})
;
}]);
I hope i answered your question. 我希望我回答了你的问题。
解决方案3
0 2014-12-17 10:08:46
This is a clientside solution. 这是一个客户端解决方案。 Just FYI. 仅供参考。
You may set any other character for angular's interpolate symbol:
您可以为角度的插补符号设置任何其他字符： app.config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[[').endSymbol(']]'); });
(but it's may hurt - ide with angular support didn't recognize your symbol) （但可能会造成伤害-具有角度支撑的ide无法识别您的符号）
The best practice of binding - is use ngBind whenever it's possible (instead of {{ }} expresions):
绑定的最佳实践-尽可能使用ngBind（而不是{{}}表达）： <span ng-bind="myVal"></span>
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it.
instead of 代替
<span>{{myVal}}</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.