Angularjs 路由与 django 的 url [英] Angularjs routing with django's urls

问题描述

我的前端使用 AngularJS，后端使用 Django.

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

我遇到的问题是客户端/服务器路由.我彻底糊涂了.我要做的是:

1. 从 django 渲染 entry.html 页面，该页面在正文中包含

   .我假设在此之后路由由 angular 的 routeProvider 处理

2. 在我的 static/js 文件夹中，我有一个文件 app.js，它为我要填写的表单的另一个模板定义了路由

但是，当我运行项目并加载应用程序的入口 url 时，我没有被重定向到表单.

所有 javascript 文件都包含在内，我的日志中没有看到任何 404.
我在这里做错了什么?

更新:app.js

App.config(['$routeProvider', function($routeProvider){$routeProvider.when('/',{templateUrl: '/templates/workflow/request_form.html', controller:EntryCtrl}).否则({重定向到:'/'})}]);

entry.html

{% 扩展site_base.html" %}{% 加载静态文件 %}{% 块体 %}
<ng-view></ng-view>
{% 结束块 %}{% 阻止 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 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 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>{% 结束块 %}

controller.js

var App = angular.module('app', ['ngResource']);函数 EntryCtrl($scope, $http, $routeParams, $location, master){$scope.form = master.form}

解决方案

您必须将控制器定义为模块的一部分.请尝试以下操作:

//controller.jsangular.module('app').controller('EntryCtrl', ['$范围','$http','$routeParams','$位置','master',//这必须是角度可注入的功能($scope，$http，$routeParams，$location，master){$scope.form = master.form;}]);

并且您应该只在 app.js 中定义应用程序一次:

//angular.jsangular.module('app', ['ngResource']).config(['$routeProvider',功能($routeProvider){$routeProvider.什么时候('/'， {templateUrl: '/templates/workflow/request_form.html',控制器:'EntryCtrl'}).除此以外({重定向到:'/'});}]);

然后确保在模板中定义 angular 应用程序后包含它:

<script src=".../app.js"></script><!-- 定义应用程序的地方--><script src=".../controller.js"></script><!-- 其中定义了 EntryCtrl -->

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

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