masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
python - angular route 与 django urls 冲突怎么解决？
迷茫
迷茫 2017-04-18 10:32:02
0
1
467

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

迷茫
迷茫

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

membalas semua(1)
迷茫
迷茫2017-04-18 10:34:02 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan