搜索

首页  >  问答  >  正文

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没获取到路由请求吗？该如何解决？谢谢。

迷茫迷茫2787 天前472

全部回复(1)我来回复

  • 迷茫

    迷茫2017-04-18 10:34:02

    谢邀，推荐你先看一下这篇文章 - 单页应用的核心

    开发调试时，你可以使用开发者工具，查看一下模板请求的实际路径，另外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">
<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里的#号

    回复
    0
  • 取消回复