python - angular route 與 django urls 沖突怎么解決？
問(wèn)題描述
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)
測(cè)試，當(dāng)訪問(wèn)/，base字段是出現(xiàn)的，說(shuō)明ng-view工作 正常，但當(dāng)訪問(wèn)/students/1時(shí)，返回django路由報(bào)錯(cuò)，未找到該路由。
studentDetail.html是存在的。
這是angular沒(méi)獲取到路由請(qǐng)求嗎？該如何解決？謝謝。
問(wèn)題解答
回答1：謝邀，推薦你先看一下這篇文章 - 單頁(yè)應(yīng)用的核心
開(kāi)發(fā)調(diào)試時(shí)，你可以使用開(kāi)發(fā)者工具，查看一下模板請(qǐng)求的實(shí)際路徑，另外Django 路由配置，你只要能匹配模板請(qǐng)求地址，正確返回模板文件即可。Angular 1.x 前端部分請(qǐng)參考以下示例：
Angular 1.x Demo 項(xiàng)目目錄結(jié)構(gòu)
views/student.module.js
var studentModule = angular.module(’student’, []);studentModule.component(’studentDetail’,{ templateUrl:’views/studentDetail.html’, // 注意這邊的路徑,相對(duì)于根目錄 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='http://www.aoyou183.cn/' > <!--需根據(jù)部署后的實(shí)際路徑做調(diào)整--> <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='http://www.aoyou183.cn/wenda/views/student.module.js'></script></head><body ng-app='app'><p> <a href='http://www.aoyou183.cn/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>
建議如果新項(xiàng)目使用 Angular 1.x 都要不要再使用$scope哈，好處有很多，其中一點(diǎn)是方便以后升級(jí)遷移，開(kāi)發(fā)語(yǔ)言可以考慮使用 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);
詳細(xì)可以參考，component-property-binding-input-angular-2
另外如果有興趣的話或項(xiàng)目允許的話，可以考慮一下使用新版的Angular，當(dāng)前最新的版本是4.0.1哈
友情提示(題主請(qǐng)略過(guò))：本示例需要啟本地服務(wù)器哈，如果有安裝Python的話，可以在命令行運(yùn)行 python -m SimpleHTTPServer
參考資料
Angularjs html5mode模式路由
angular路由去掉的URL里的#號(hào)
相關(guān)文章：
1. mysql - 新浪微博中的關(guān)注功能是如何設(shè)計(jì)表結(jié)構(gòu)的？2. angular.js - 關(guān)于$apply()3. MySQL數(shù)據(jù)庫(kù)中文亂碼的原因4. dockerfile - [docker build image失敗- npm install]5. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問(wèn)題。6. 如何解決Centos下Docker服務(wù)啟動(dòng)無(wú)響應(yīng)，且輸入docker命令無(wú)響應(yīng)？7. nignx - docker內(nèi)nginx 80端口被占用8. angular.js - Ionic 集成crosswalk后生成的apk在android4.4.2上安裝失敗？？？9. android-studio - Android Studio 運(yùn)行項(xiàng)目的時(shí)候一堆警告，跑步起來(lái)！？10. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？
網(wǎng)公網(wǎng)安備