如何将angular2与jinja2模板和flas结合起来
回答此问题可获得 20 贡献值，回答如果被采纳可获得 50 分。
<p>在Angular 1取得很大成功后，我开始使用Angular 2。我学习了<a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow">Quickstart</a>和<a href="https://angular.io/docs/ts/latest/tutorial/" rel="nofollow">Tour of Heroes</a>两门教程，一切都很有魅力。</p>
<p>lite服务器启动了，我看到<code>tsc</code>在监视模式下运行，我甚至看到BrowserSync连接起来了。伟大的！</p>
<p>然而，我需要开始让事情变得更真实一些。</p>
<p><strong><em>如何使用flask dev或gunicorn服务器（将初始index.html文件作为呈现的jinja模板）来完成所有这些工作，而不是使用lite服务器？</em></strong></p>
<p>让flask dev服务器进行一次非常频繁的尝试，我基本上是将教程中的example index.html的内容复制到我的jinja模板中，然后运行<code>npm run tsc:w</code>，最后启动flask dev服务器，希望一切顺利。一切都很顺利。但在浏览器中我看到了一些问题：</p>
<pre><code>angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <
at ZoneDelegate.invoke (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:332:29)
at Zone.run (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:227:44)
at http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:576:58
Evaluating http://127.0.0.1:5000/app/main.js
Error loading http://127.0.0.1:5000/app/main.js`
</code></pre>
<p>查看罪犯transpile main.js文件，我看到：</p>
<pre><code>(function(System, SystemJS, require) {<!doctype html>
<html>
<head lang='en'>
</code></pre>
<p>所以，是的，那不管用…很明显我的线路乱七八糟。</p>
<p>填隙片、polyfill、reactive extensions、systemjs、angular2本身都有很多黑色魔法，然后加入tsc和lite服务器。诚然，我还没有把这些都搞定，这需要时间，但我希望我的项目能很快进入正常状态。</p>
<p>（我不介意在开发中使用lite服务器（BrowserSync是一个不错的额外功能），只要我可以将其配置为代理真正的flask服务器，它将返回render jinja模板）</p>
<p><strong>更新</strong></p>
<p>下面是实际的模板索引文件，其中包含我所做的一些小更改：</p>
<pre><code><!doctype html>
<html>
<head lang="en">
{% block head %}
<meta charset="utf-8">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
{% endblock %}
</head>
<!-- 3. Display the application -->
<body>
{% block content %}{% endblock %}
<my-app>Loading...</my-app>
<script>
(function(globals) {
this.MyConfig = {
staticDir: '{{ config["STATIC_DIR"] }}'
};
}(this));
</script>
</body>
</html>
</code></pre>
请先 登录 后评论
针对此问题: 更多的回答
- 89 关注
- 1 收藏，216 浏览
- 网友 提问于 2天前
相关Python问题
- 使用登录请求.post导致“错误405不允许” 2 回答
- 使用登录进行Python web抓取 6 回答
- 使用登录进行抓取 3 回答
- 使用登录页面从网站抓取数据 4 回答
- 使用白色圆圈背景使图像更平滑 5 回答
- 使用百分位数删除Pandas数据帧中的异常值 6 回答
- 使用百分号进行Python字典操作 4 回答
- 使用百分比delimi的Python字符串模板 3 回答
- 使用百分比分割Numpy ndarray最有效的方法是什么？ 7 回答
- 使用百分比分配和修改变量（计算） 3 回答
- 使用百分比单位绘制数据 7 回答
- 使用百分比在单个采购订单中组合不同的订单类型 8 回答
- 使用百分比将数据帧的子集与完整数据帧进行比较 5 回答
- 使用百分比形式的BBOX选项，而不是绝对像素PyScreenShot Python 3 回答
- 使用百分比登录列nam更新表 6 回答
- 使用百分比登录操作系统或者os.popen公司 2 回答
- 使用百分比计算：十进制还是可读？ 1 回答
- 使用的dataset和dataloader加载数据时出错torch.utils.data公司. TypeError:类型为“type”的对象没有len（） 3 回答
- 使用的Json无效json.dump文件在Python3 9 回答
- 使用的overwrite方法\r在python 3[PyCharm]中不起作用 5 回答
