简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

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

迷茫迷茫2741 hari yang lalu442

membalas semua(1)saya akan balas

  • 迷茫

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

    Terima kasih atas jemputan, saya syorkan anda membaca artikel ini dahulu - Teras aplikasi satu halaman

    Apabila membangun dan menyahpepijat, anda boleh menggunakan alat pembangun untuk menyemak laluan sebenar permintaan templat Selain itu, untuk konfigurasi penghalaan Django, anda hanya perlu memadankan alamat permintaan templat dan mengembalikan fail templat dengan betul. Sila rujuk contoh berikut untuk bahagian hujung hadapan Sudut 1.x:

    Struktur direktori projek Demo Angular 1.x

    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>

    Adalah disyorkan bahawa jika projek baharu menggunakan Angular 1. Contoh komponen adalah seperti berikut: 

    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);

    Untuk butiran, sila rujuk komponen-property-binding-input-angular-2

    Selain itu, jika anda berminat atau projek membenarkan, anda boleh mempertimbangkan untuk menggunakan versi baharu Angular Versi terkini ialah 4.0.1

    Peringatan mesra (sila langkau soalan): Contoh ini perlu memulakan pelayan setempat Jika Python dipasang, anda boleh menjalankan python -m SimpleHTTPServer

    pada baris arahan.

    Bahan rujukan

    • Penghalaan mod html5mode Angularjs

    • # nombor dalam URL dialih keluar oleh penghalaan sudut

    balas
    0
  • Batalbalas