recherche

Maison  >  Questions et réponses  >  le corps du texte

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

迷茫迷茫2795 Il y a quelques jours480

répondre à tous(1)je répondrai

  • 迷茫

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

    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

    répondre
    0
  • Annulerrépondre