communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
python - angular route 与 django urls 冲突怎么解决？
迷茫
迷茫 2017-04-18 10:32:02
0
1
470

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

迷茫
迷茫

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

répondre à tous(1)
迷茫
迷茫2017-04-18 10:34:02 1 plancher

Merci pour l'invitation, je vous recommande de lire d'abord cet article - Le cœur des applications monopage

Lors du développement et du débogage, vous pouvez utiliser les outils de développement pour vérifier le chemin réel de la demande de modèle. De plus, pour la configuration du routage Django, il vous suffit de faire correspondre l'adresse de la demande de modèle et de renvoyer le fichier modèle correctement. Veuillez vous référer à l'exemple suivant pour la partie frontale Angular 1.x :

Structure du répertoire du projet de démonstration 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>

Il est recommandé que si un nouveau projet utilise Angular 1. Des exemples de composants sont les suivants : 

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

Pour plus de détails, veuillez vous référer à composant-property-binding-input-angular-2

De plus, si vous êtes intéressé ou que le projet le permet, vous pouvez envisager d'utiliser la nouvelle version d'Angular. La dernière version est la 4.0.1

.

Rappel amical (veuillez ignorer la question) : cet exemple doit démarrer le serveur local. Si Python est installé, vous pouvez exécuter python -m SimpleHTTPServer

sur la ligne de commande.

Matériels de référence

  • Routage en mode html5mode Angularjs

  • Le numéro # dans l'URL supprimé par routage angulaire

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal