Django的网址Angularjs路由 [英] Angularjs routing with django's urls

问题描述

我是用我的前端和Django的作为后端AngularJS。

我在后端做很简单的事情，所以我没有使用tastypie考虑。

我在哪里卡住的问题是客户机/服务器的路由。我彻底糊涂了。
我做的是：

1. 渲染从Django中有＆LT的entry.html页; DIV NG-视图＆gt;＆LT; / DIV＆GT; 在体内。
   我假设，在此之后的路由是由角的routeProvider处理




2. 在我的静态/ JS文件夹我有一个文件app.js它定义另一个模板的形式，我想填补路线

然而，当我运行该项目，并加载应用程序的入口网址，我不重定向到窗体。

所有的JavaScript文件都包含和我没有看到任何404在我的日志中。结果
我在做什么错在这里？

更新：
app.js

 的App.config（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider
        。当（'/'，{templateUrl：/templates/workflow/request_form.html'，控制器：EntryCtrl}）
        不然的话（{redirectTo：'/'}）
}]）;
 

entry.html

  {％伸出site_base.html％}
{％负载staticfiles％}{％块体％}
  ＆LT; D​​IV CLASS ='NG-应用'＆GT;
    ＆LT; D​​IV CLASS ='排液'＆GT;
        ＆LT; NG-视图＆gt;＆LT; / NG-视图＆gt;
       ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;{％端块％}{％块extra_script％}
     ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js＆GT;＆下; /脚本＆GT;
      ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js＆GT; ＆LT; / SCRIPT＆GT;
      ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.0.6/angular-resource.min.js＆GT;＆下; /脚本＆GT;
      ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js＆GT; ＆LT; / SCRIPT＆GT;
      ＆LT;脚本的src =/静态/ JS / controller.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本的src =/静态/ JS / app.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本的src =/静态/ JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本的src =/静态/ JS /引导-datepicker.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本SRC =htt​​ps://maps.googleapis.com/maps/api/js?keyAIzaSyCLZKcTGUw9V0- UcEHuZMCf6uZpNZZaVrg＆放大器;传感器=假＆GT;＆LT; / SCRIPT＆GT;
{％端块％}
 

controller.js

  VAR应用= angular.module（'应用'，['ngResource']）;功能EntryCtrl（$范围，$ HTTP，$ routeParams，$位置，硕士）
{
    $ scope.form = master.form
}
 

解决方案

您必须定义控制器模块的一部分。请尝试以下操作：

  // controller.js
angular.module（应用）
       .controller（'EntryCtrl'，[
          '$范围'，
          $ HTTP，
          '$ routeParams'，
          '$位置'，
          '主人'，//这必须注射角
          功能（$范围，$ HTTP，$ routeParams，$位置，硕士）{
              $ scope.form = master.form;
          }
       ]）;
 

和您应该只有一次中定义的应用程序的 app.js ：

  // angular.js
angular.module（'应用'，['ngResource']）
       的.config（[
         '$ routeProvider'，
         功能（$ routeProvider）{
             $ routeProvider
                。什么时候（'/'， {
                    templateUrl：/templates/workflow/request_form.html'，
                    控制器：'EntryCtrl
                }）
                。除此以外（{
                    redirectTo：'/'
                }）;
         }
       ]）;
 

然后确保你有这个定义的模板内的角应用后：

 ＆LT; SCRIPT SRC =... / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =... / app.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 在这里的应用程序定义 - ＆GT;
＆LT; SCRIPT SRC =... / controller.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 在这里EntryCtrl定义 - ＆GT;
 

I am using AngularJS for my front-end and Django as a back-end.

I am doing very simple things at the back-end so I have not considered using tastypie.

The problem where I am stuck is the client/server routing. I am thoroughly confused. What I do is:

1. Render the entry.html page from django which has <div ng-view></div> in the body. I am assuming that after this the routing is handled by angular's routeProvider

2. In my static/js folder I have a file app.js which defines the route for another template for the form that I want to fill

However when I run the project and load the app's entry url, I do not get redirected to the form.

All the javascript files are included and I dont see any 404's in my log.
What am I doing wrong here ?

UPDATE : app.js

App.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{templateUrl: '/templates/workflow/request_form.html',     controller:EntryCtrl})
        .otherwise({redirectTo:'/'})
}]);

entry.html

{% extends "site_base.html" %}
{% load staticfiles %}



{% block body %}
  <div class='ng-app'>
    <div class='row-fluid'>
        <ng-view></ng-view>
       </div>
   </div>

{% endblock %}

{% block extra_script %}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
      <script src="http://code.angularjs.org/1.0.6/angular-resource.min.js"></script>
      <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js">    </script>
      <script src="/static/js/controller.js"></script>
      <script src="/static/js/app.js"></script>
      <script src="/static/js/bootstrap.min.js"></script>
      <script src="/static/js/bootstrap-datepicker.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?keyAIzaSyCLZKcTGUw9V0-    UcEHuZMCf6uZpNZZaVrg&sensor=false"></script>
{% endblock %}

controller.js

var App = angular.module('app', ['ngResource']);

function EntryCtrl($scope, $http, $routeParams, $location, master)
{
    $scope.form = master.form
}

解决方案

You have to define the controller as part of the module. Try the following:

// controller.js
angular.module('app')
       .controller('EntryCtrl', [
          '$scope',
          '$http',
          '$routeParams',
          '$location',
          'master', // this has to be angular injectable
          function($scope, $http, $routeParams, $location, master) {
              $scope.form = master.form;
          }
       ]);

and you should only define the app once within the app.js:

// angular.js
angular.module('app', ['ngResource'])
       .config([
         '$routeProvider',
         function($routeProvider){
             $routeProvider
                .when('/', {
                    templateUrl: '/templates/workflow/request_form.html',
                    controller: 'EntryCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
         }
       ]);

Then make sure you include this after you define the angular app within the template:

<script src=".../angular.min.js"></script>
<script src=".../app.js"></script> <!-- where app is defined -->
<script src=".../controller.js"></script> <!-- where EntryCtrl is defined -->

这篇关于Django的网址Angularjs路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！