AngularJS Routing与Django无法正常工作

时间:2016-09-03 22:16:02

标签: angularjs django

我知道有很多关于AngularJS路由的问题,相信我,我已经通读了所有这些......

我的问题很奇怪。基本上路由适用于一条路由,但没有其他路由..并且路由有效我得到一个关于控制器的奇怪错误,我不知道如何解决:

enter image description here

因此路由适用于“设置”按钮,但是当我按下“英语”按钮时,视图不会加载。甚至更奇怪的是,如果我从设置视图中删除控制器,那么设置页面也不会加载..

以下是相关代码:

的index.html

<!DOCTYPE html>
<html>
<head>
  <title>CRS Client Portal</title>

  <base href="/" />

  <!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <!--[if lt IE 7]>
    <div style=' clear: both; text-align:center; position: relative;'>
        <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
    </div>
  <![endif]-->

  {% include 'stylesheets.html' %}
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body ng-app="crsportal">
  {% if user.is_authenticated %}
  <div class="container-fluid user-profile">
    {% include 'userprofile.html' %}
  </div>
  {% else %}
  <div class="container-fluid" ng-controller="LoginController as vm">
      {% include 'login.html' %}
  </div>
  {% endif %}

  {% include 'javascripts.html' %}
</body>
</html>

userprofile.html

{% include 'navbar.html' %}
<div class="container">
    <h1 id="languagehead">Please choose a language to get started:</h1>
    <a href="/english" class="btn btn-primary langbtn" role="button"> English</a>
    <a href="/spanish" class="btn btn-primary langbtn" role="button"> Spanish</a>
</div>

<div ng-view></div>

**app

的.js **

(function () {
  'use strict';

  angular
    .module('crsportal', [
      'crs.authentication',
      'crs.config',
      'crs.routes',
      'crs.profiles.controllers',
      'video.controller',
    ]);

  angular
    .module('crs.config', []);

  angular
    .module('crs.profiles.controllers', []);

  angular
    .module('crs.routes', ['ngRoute']);

  angular
    .module('video.controller', []);

  angular
    .module('crsportal')
    .run(run);

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

    /**
    * @name run
    * @desc Update xsrf $http headers to align with Django's defaults
    */
  function run($http) {
      $http.defaults.xsrfHeaderName = 'X-CSRFToken';
      $http.defaults.xsrfCookieName = 'csrftoken';
    }

})();

routes.js

(function () {
    'use strict';

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

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

    /**
     * @name config
     * @desc Define valid application routes
     */
    function config($routeProvider) {
      $routeProvider.when('/home', {
         templateURL: 'static/templates/home.html'
      }).when('/english', {
         templateURL:'static/templates/test.html',
         controller: 'VideoController',
         controllerAs: 'vm'
      }).when('/spanish', {
         templateURL:'static/templates/spanish.html'
      }).when('/:username/settings', {
         templateUrl: 'static/templates/settings.html',
         controller: 'ProfileSettingsController',
         controllerAs: 'vm'
      }).when('/english/:title', {
         templateUrl: 'static/templates/video.html'
      }).otherwise('/home');
    }
})();

个人资料-settings.controller.js

/**
* ProfileSettingsController
* @namespace crs.profiles.controllers
*/
(function () {
  'use strict';

  angular
    .module('crs.profiles.controllers')
    .controller('ProfileSettingsController', ProfileSettingsController);

  ProfileSettingsController.$inject = [
    '$location', '$routeParams', 'Authentication', 'Profile', 'Snackbar'
  ];

  /**
  * @namespace ProfileSettingsController
  */
  function ProfileSettingsController($location, $routeParams, Authentication, Profile, Snackbar) {
    var vm = this;

    vm.destroy = destroy;
    vm.update = update;

    activate();


    /**
    * @name activate
    * @desc Actions to be performed when this controller is instantiated.
    * @memberOf thinkster.profiles.controllers.ProfileSettingsController
    */
    function activate() {
      var authenticatedAccount = Authentication.getAuthenticatedAccount();
      var username = $routeParams.username.substr(1);

      // Redirect if not logged in
      if (!authenticatedAccount) {
        $location.url('/');
        Snackbar.error('You are not authorized to view this page.');
      } else {
        // Redirect if logged in, but not the owner of this profile.
        if (authenticatedAccount.username !== username) {
          $location.url('/');
          Snackbar.error('You are not authorized to view this page.');
        }
      }

      Profile.get(username).then(profileSuccessFn, profileErrorFn);

      /**
      * @name profileSuccessFn
      * @desc Update `profile` for view
      */
      function profileSuccessFn(data, status, headers, config) {
        vm.profile = data.data;
        $location.url('/home');
      }

      /**
      * @name profileErrorFn
      * @desc Redirect to index
      */
      function profileErrorFn(data, status, headers, config) {
        $location.url('/');
        Snackbar.error('That user does not exist.');
      }
    }


    /**
    * @name destroy
    * @desc Destroy this user's profile
    * @memberOf thinkster.profiles.controllers.ProfileSettingsController
    */
    function destroy() {
      Profile.destroy(vm.profile.username).then(profileSuccessFn, profileErrorFn);

      /**
      * @name profileSuccessFn
      * @desc Redirect to index and display success snackbar
      */
      function profileSuccessFn(data, status, headers, config) {
        Authentication.unauthenticate();
        window.location = '/';

        Snackbar.show('Your account has been deleted.');
      }


      /**
      * @name profileErrorFn
      * @desc Display error snackbar
      */
      function profileErrorFn(data, status, headers, config) {
        Snackbar.error(data.error);
      }
    }


    /**
    * @name update
    * @desc Update this user's profile
    * @memberOf thinkster.profiles.controllers.ProfileSettingsController
    */
    function update() {
      Profile.update(vm.profile).then(profileSuccessFn, profileErrorFn);

      /**
      * @name profileSuccessFn
      * @desc Show success snackbar
      */
      function profileSuccessFn(data, status, headers, config) {
        Snackbar.show('Your profile has been updated.');
      }


      /**
      * @name profileErrorFn
      * @desc Show error snackbar
      */
      function profileErrorFn(data, status, headers, config) {
        Snackbar.error(data.error);
      }
    }
  }
})();

1 个答案:

答案 0 :(得分:1)

错误消息告诉您确切的错误:

  

未知提供商:ProfileProvider&lt; - 个人资料&lt; -   ProfileSettingsController

您的ProfileSettingsController正在注入Profile,它似乎不存在,它在您提供的javascript中也不存在。

我建议检查您的代码并确保您实际定义了配置文件工厂/服务。