python - angular route 与 django urls 冲突怎么解决？
问题描述
app.js
var app = angular.module(’app’, [ ’ngResource’, ’ngRoute’, // ’ui.bootstrap’, // ’ngResource’, ’student’,]);app.config(function( $locationProvider, $routeProvider ){ $locationProvider.html5Mode({ enabled:true }) $routeProvider. when('/', {template: ’base’, }). when('/student/1', {template: '<student-detail></student-detail>', }). otherwise({template: 'Not Found' }) });
student.js
var app = angular.module(’student’, []);app.component(’studentDetail’,{templateUrl:’studentDetail.html’,controller: function($scope) {$scope.test = ’Got it.’} });
urls.py
class SimpleStaticView(TemplateView): def get_template_names(self):return [self.kwargs.get(’template_name’) + '.html']urlpatterns = [ url(r’^admin/’, include(admin.site.urls)), url(r’^api/’, include('students.api.urls', namespace=’students-api’)), url(r’^(?P<template_name>w+)$’, SimpleStaticView.as_view(), name=’example’), url(r’^$’, TemplateView.as_view(template_name=’home.html’)),]if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
测试，当访问/，base字段是出现的，说明ng-view工作 正常，但当访问/students/1时，返回django路由报错，未找到该路由。
studentDetail.html是存在的。
这是angular没获取到路由请求吗？该如何解决？谢谢。
问题解答
回答1：谢邀，推荐你先看一下这篇文章 - 单页应用的核心
开发调试时，你可以使用开发者工具，查看一下模板请求的实际路径，另外Django 路由配置，你只要能匹配模板请求地址，正确返回模板文件即可。Angular 1.x 前端部分请参考以下示例：
Angular 1.x Demo 项目目录结构
views/student.module.js
var studentModule = angular.module(’student’, []);studentModule.component(’studentDetail’,{ templateUrl:’views/studentDetail.html’, // 注意这边的路径,相对于根目录 controller: function($scope) {$scope.test = ’Got it.’ }});
views/studentDetail.html
<h4>{{test}}</h4>
index.html
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title>Angular 1.x Demo</title> <base href='https://www.haobala.com/' > <!--需根据部署后的实际路径做调整--> <script src='https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js'></script> <script src='https://cdn.bootcss.com/angular.js/1.6.3/angular-route.min.js'></script> <script src='https://www.haobala.com/wenda/views/student.module.js'></script></head><body ng-app='app'><p> <a href='https://www.haobala.com/student'>Student</a></p><p ng-view></p><script type='text/javascript'> var app = angular.module(’app’, [’ngRoute’,’student’, ]); app.config( function( $locationProvider, $routeProvider ){$locationProvider.html5Mode({ enabled:true});$routeProvider.when('/', { template: ’base’,}).when('/student', { template: '<student-detail></student-detail>',}).otherwise({ template: 'Not Found'}) });</script></body></html>
建议如果新项目使用 Angular 1.x 都要不要再使用$scope哈，好处有很多，其中一点是方便以后升级迁移，开发语言可以考虑使用 ES6 或 TypeScript。组件示例如下：
const counter = { bindings: { count: ’<’ }, controller() { this.increment = () => this.count++; this.decrement = () => this.count--; }, template: ` <p> <button ng-click='$ctrl.decrement()'>-</button> <input ng-model='$ctrl.count'> <button ng-click='$ctrl.increment()'>+</button> </p> `};angular .module(’app’) .component(’counter’, counter);
详细可以参考，component-property-binding-input-angular-2
另外如果有兴趣的话或项目允许的话，可以考虑一下使用新版的Angular，当前最新的版本是4.0.1哈
友情提示(题主请略过)：本示例需要启本地服务器哈，如果有安装Python的话，可以在命令行运行 python -m SimpleHTTPServer
参考资料
Angularjs html5mode模式路由
angular路由去掉的URL里的#号
相关文章：
1. javascript - 引入 simditor，但是显示标签，这个怎么解决。2. android - 目前有哪些用Vue.js开发移动App的方案？3. 为什么要通过常量的方式拐弯抹角的写呢，直接写DSN之类的不好吗4. python - 关于flask 静态文件配置404的问题5. python - scrapy获取网页指定内容，后翻到下一页继续，固定循环次数。。问题6. defined这个实验代码我这里不对哇7. python - 一个关于爬虫的问题8. linux - 为公司配置服务器，要求在上面装win7的虚拟机，那我还需要装桌面环境吗？9. javascript - 仿着echarts官网的地图做了个例子，但是只显示出来了地点，没有画出飞机动态效果？？急10. android - 安卓实现类似QQ刚换聊天背景的功能
网公网安备