【问题标题】:AngularJS Routing not working properly with DjangoAngularJS 路由无法与 Django 一起正常工作
【发布时间】:2016-09-04 07:46:12
【问题描述】:

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

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

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

以下是相关代码:

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');
    }
})();

profile-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);
      }
    }
  }
})();

【问题讨论】:

  • 你在哪里定义了Profile提供者?

标签: angularjs django


【解决方案1】:

错误消息准确地告诉您出了什么问题:

未知提供者:ProfileProvider

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

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

【讨论】:

  • 对,来发现我定义的时候打错了。所以现在该错误已修复,但我仍然遇到路由无法正常工作的问题
  • 如果我的解决方案解决了您的问题,您需要将其标记为正确并在您的下一个问题中发布另一个问题,我们不能只在评论部分解决您的问题。
  • 您的解决方案解决了部分问题。最初的问题主要与路由不起作用有关,我认为错误消息与该问题有关。但我明白了,你想要声望点什么的……感谢香农的帮助。希望你能回答我的下一篇文章:)
  • 嘿@JamesBrace,不仅如此,如果有人来这里寻找路由问题,这一切都归结为您的原始帖子,与路由本身无关,而是一个错字提供者名称,因此如果人们必须通读 cmets 以获得他们想要的答案,这将无济于事:)
猜你喜欢
  • 2017-10-24
  • 2014-12-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-03
  • 2018-06-01
相关资源
最近更新 更多