我一直在关注这个Tour of Heroes教程.我有一个Django应用程序,其结构可以简化如下
apps/my_app/migrations/
apps/my_app/__init__.py
apps/my_app/urls.py
apps/my_app/views.py
frontend_stuff/js/ javascripts here
frontend_stuff/css/ css here
英雄应用程序具有以下结构:
heroes/app/ contains all the .ts and .html files
heroes/node_modules/ angular2 and other libraries
heroes/styles.css css file
heroes/index.html
heroes/package.json and other config files
目前我已经使用Django View构建了一个API,它通过URL处理Http请求并返回JSON.但是我应该在哪里/如何将这个Angular应用程序放入当前的Django应用程序中,以及如何在向Django后端发出初始GET请求时将Angular应用程序加载到浏览器中?
编辑:关于加载HTML和JS的更具体的问题:
由于Angular 2使用Component而模板是由Angular而不是Django呈现的,如何让Angular“访问”那些html? @Luis提到这些文件应放在静态文件夹中,但{%static%}是Django语法,这对Angular没有意义.
同样,我认为app / main(如下所示)也应放在静态文件夹中.但是如何引用Angular内部的位置?谢谢!
System.import('app/main')
.then(null, console.error.bind(console));
更新:
我跟着this answer并使用了/ static / js / my_app / main,它现在“大部分”正常加载.到目前为止,我的所有js文件似乎都被加载了;但控制台日志显示某些角度文件在加载成功之前会出现404错误.错误如下图所示:
system.src.js:1085 GET http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js 404 (NOT FOUND)fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:1085 XHR finished loading: GET "http://localhost:8000/static/js/rbac/app/rbac.service.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:1085 XHR finished loading: GET "http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:332 Error: Error: XHR error (404 NOT FOUND) loading http://localhost:8000/static/js/node_modules/angular2/src/platform/browser.js(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
system.src.js:1085 GET http://localhost:8000/static/js/node_modules/angular2/src/http.js 404 (NOT FOUND)
更新:上述错误是由于系统配置中的路径不正确造成的.现在一切都加载以下配置:
<script>
System.config({
defaultJSExtensions: true,
map:{
angular2: '/static/js/node_modules/angular2',
rxjs: '/static/js/node_modules/rxjs'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/static/apps/my_app/app/main')
.then(null, console.error.bind(console));
</script>
解决方法:
你应该照顾好几件事:
> Django不是Rails.它没有内置的解析TypeScript的方法.您应该首先编译所有TypeScript内容.
>加载Angular应用程序只是常规HTML.您可以像往常一样使用模板.我不太确定如何在Angular 2中做到这一点,但由于它只是简单的HTML / JS,它没有区别:通过包含适当的文件,你将适当地引用Angular.在我的许多项目中,我更喜欢(出于问题范围的原因)明确调用angular.bootstrap.不知道Angular 2是否具有相同的呼叫或不同的呼叫,但该过程不会改变.
> django不会处理Angular 2模板,而是像静态文件一样处理.确保将它们放在应用程序的静态/目录中并适当地引用它们(例如,在你的主django模板中,如果你声明你的角度应用程序和stateProvider仍然有效,你可以为状态声明一个模板lke this:'{%static’ myapp / angular-templates / mytemplate.html’%}’,前提是该文件夹存在).
>如果您的主角度模块有一个单独的.js文件(是的,COMILE你的.ts文件,因为Django不会),请确保以某种方式提供从django到配置模块的代码的STATIC_URL内容,找到模板(并直接使用window.STATIC_URL而不是静态django标记).在Angularjs 1中,我这样做是为了初始化所有内容:
angular.element.ready(function() {
window.STATIC_URL = '{{ STATIC_URL }}';
// more constants I'd need
angular.bootstrap(['myAngularModule']);
});
>编辑(请注意这一点导致头痛)请记住,您必须在django服务模板中引用{{something}}或{%something%}.然后你像我在第4点那样分配一个JS变量,所以这些值是可用的.就我而言,我不使用静态标记,而是使用STATIC_URL变量.正如你所说,{%static%}在角度模板中不起作用,所以不要使用它,只需将所需资源连接到STATIC_URL(这与第4点中的代码相关)变量.这是AngularJS 1中.js文件中的一个示例.通过适当调整它,您应该在AngularJS 2文件中执行类似的操作:
mymodule.config(['$stateProvider', function($stateProvider) {
$stateProvider.state({
name: 'main',
templateUrl: window.STATIC_URL + 'path/to/template.html'
// perhaps better inject $window if you want to run test suites?
})
}])
所以请记住:
>请记住AngularJS,这对于任何框架都是正确的 – 不仅仅是AngularJS版本 – 与后端fwk分离.
>请记住,您需要以某种方式引用您需要在静态文件xD中引用的静态文件.传递变量的技巧将在任何框架中完成:你只需告诉javascript主模板中django变量的值(在引导你的框架之前),然后你的js框架就可以访问javascript中的值了.
>你永远不会从你的fwk访问django标签.
> Django不会将任何内容转换为JS.除非找到第三方资产管道库,否则您需要准备好.js文件.
原文地址:https://codeday.me/bug/20190608/1200884.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。