python - angular route 与 django urls 冲突怎么解决？
本文介绍了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没获取到路由请求吗？该如何解决？谢谢。
解决方案
谢邀，推荐你先看一下这篇文章 - 单页应用的核心
开发调试时，你可以使用开发者工具，查看一下模板请求的实际路径，另外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="/" > <!--需根据部署后的实际路径做调整-->
<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="views/student.module.js"></script>
</head>
<body ng-app="app">
<div>
<a href="/student">Student</a>
</div>
<div ng-view></div>
<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: `
<div>
<button ng-click="$ctrl.decrement()">-</button>
<input ng-model="$ctrl.count">
<button ng-click="$ctrl.increment()">+</button>
</div>
`
};
angular
.module('app')
.component('counter', counter);详细可以参考，component-property-binding-input-angular-2
另外如果有兴趣的话或项目允许的话，可以考虑一下使用新版的Angular，当前最新的版本是4.0.1哈
友情提示(题主请略过)：本示例需要启本地服务器哈，如果有安装Python的话，可以在命令行运行 python -m SimpleHTTPServer
参考资料
这篇关于python - angular route 与 django urls 冲突怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
