AngularJS路由行为不符合预期,没有任何错误

时间:2016-09-16 08:51:46

标签: javascript angularjs django

SO的编码员,

我的代码似乎遇到了一个奇怪的问题,我对angularJS来说相对较新,所以这可能是我的错误,但我似乎无法弄明白。

用例如下,我有一个简单的django rest_framework应用程序,100%工作(使用swagger UI测试)。我相当肯定Django应用程序中没有任何问题。我希望使用angularJS来控制前端。

由于一些奇怪的原因我无法弄清楚,angularJS中的路由拒绝完成它的工作。

这是我的app.routes.js

(function () {

  'use strict';



  angular
    .module('inventaris.routes')
    .config(config);

  config.$inject = ['$routeProvider'];

  function config($routeProvider) {
    $routeProvider.when('/register', {
        controller: 'RegisterController',
        controllerAs: 'vm',
        templateUrl: '/static/templates/authentication/register.html'
    }).otherwise('/');
  }
})();

以下代码块是我的app.js

(function () {  
  'use strict';   
  angular   
     .module('inventaris', [    
        'inventaris.routes',    
        'inventaris.config',    
        'inventaris.authentication'

     ]);
    angular
        .module('inventaris.routes', ['ngRoute']);
    angular
        .module('inventaris.config', []);
    angular
       .module('inventaris')
       .run(run);

    run.$inject = ['$http'];

    function run($http) {
        $http.defaults.xsrfHeaderName = 'X-CSRFToken';
        $http.defaults.xsrfCookieName = 'csrftoken';
    }
})();

以下图片是Chrome浏览器的屏幕截图,调试器处于打开状态,因为您可以看到没有错误

所以我缺少发布图片所需的10个声望,这里是图片的直接链接 - http://imgur.com/a/8ql56

我在这里不知所措,我多次检查过代码,也许我忘记了;或者,某个地方,但据我所知,我没有错过任何一个。控制台也没有给我太多帮助。

预期行为:遵循预定义路线并根据路线加载模板。

当前行为:不遵循任何路线,django的控制台显示页面已加载状态200但未显示任何内容。

这就是为什么我转向你,为什么可能是角度路线的原因是拒绝做它的工作?

如果需要更多信息,我将很乐意提交信息。

编辑 javascripts.html中的文件顺序

<script type="text/javascript" src="{% static 'bower_components/bootstrap/dist/js/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/angular/angular.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-cookies/angular-cookies.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/inventaris.js' %}"></script>
<script type="text/javascript" src="{% static 'js/inventaris.config.js' %}"></script>
<script type="text/javascript" src="{% static 'js/inventaris.routes.js' %}"></script>
<script type="text/javascript" src="{% static 'js/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/authentication/services/authentication.service.js' %}"></script>
<script type="text/javascript" src="{% static 'js/authentication/controllers/register.controller.js' %}"></script>

1 个答案:

答案 0 :(得分:0)

.otherwise({
    redirectTo : '/'
})

试试这个,它可能是有效的