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: "", }). 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\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?1.2.1"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular-route.min.js?1.2.1"></script> <script src="views/student.module.js?1.2.1"></script> </head> <body ng-app="app"> <p> <a href="/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里的#号