python - angular route 与 django urls 冲突怎么解决?
迷茫
迷茫 2017-04-18 10:32:02
0
1
465

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

Antworte allen(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="/" > <!--需根据部署后的实际路径做调整-->
    <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里的#号

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage