Угловая маршрутизация не отображает шаблон - PullRequest
Новая
       2

Угловая маршрутизация не отображает шаблон

0 голосов
/ 28 июня 2018

Когда я нажимаю на ссылку «Регистрация», она переходит на правильный URL, но ничего не отображается

код маршрутизации: 

//routing module

(function () {
    'use strict'

    angular
      .module('membership.routing', ['ngRoute'])
      .config(config);

    //$routeProvider adds routing to the client
    config.$inject = ['$routeProvider'];


    function config($routeProvider) {
        //when() takes two arguments: a path and an options object
        $routeProvider.when('/register', {
            controller: 'RegisterController',
            controllerAs: 'vm',
            templateUrl: '/static/templates/authentication/register.html',
        }).otherwise('/');
    }
})();

Контроллер: 

(function () {
    'use strict';

    angular
      .module('membership.authentication.controllers', [])
      //register the controller
      .controller('RegisterController', RegisterController);


    RegisterController.$inject = ['$location', '$scope', 'Authentication'];
    //'Authentication' is the function from the authentication service

    function RegisterController($location, $scope, Authentication) {
        var vm = this;
        vm.register = register; // allows the access of the function register()

        function register(){
            // this is calling the register method of the Authentication service
            Authentication.register(vm.email, vm.password, vm.username);
        }
    }
})();

register.html 

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <h1>Register</h1>

    <div class="well">
    <!-- This is the line that calls $scope.register -->
    <!-- vm is used in the router that allows us to refer to the controller -->
      <form role="form" ng-submit="vm.register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <!-- ng-model responsible for storing values -->
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

редактировать: 

<div ng-view class="view-animate"></div>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#not-google-plus-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Not Google Plus</a>
    </div> <!-- ./navbar-header -->

    <div class="collapse navbar-collapse" id="not-google-plus-nav">
      <ul class="nav navbar-nav pull-right">
        {% if user.is_authenticated %}
          <li><a href="/+{{ user.username }}">+{{ user.username }}</a></li>
          <li><a href="/+{{ user.username }}/settings">Settings</a></li>
          <li><a href="javascript:void(0)">Logout</a></li>
        {% else %}
          <li><a href="/login">Login</a></li>
          <li><a href="/register">Register</a></li>
        {% endif %}
      </ul>
    </div> <!-- /.collapse.navbar-collapse -->
  </div> <!-- /.container-fluid -->
</nav>

index.html 

<!DOCTYPE html>
<html ng-app="membership">
<head>
  <title>thinkster-django-angular-boilerplate</title>

  <base href="/" />

  {% include 'stylesheets.html' %}
</head>

<body>
  {% include 'navbar.html' %}

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 ng-view"></div>
    </div>
  </div>

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

thinkster.js 

angular
  .module('thinkster', [])
  .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';

  console.log('works')
}

Я использую Angular 1.7 и этот учебник https://thinkster.io/django-angularjs-tutorial#learning-django-and-angularjs. Я не уверен, почему URL-адрес правильный, но шаблон не появится, консоль не показывает никаких ошибок. И если я удаляю файл HTML из пути, консоль правильно выдает за него 404

Ответы [ 5 ]

0 голосов
/ 19 июля 2018

Прежде всего, проверьте, работает ли ваш angular, добавив «alert» или «console» в ваш раздел run.

Затем проверьте свой контроллер таким же образом. пожалуйста, предоставьте демо.

OR

просто скопируйте эту рабочую демонстрацию 

    // create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

угловой стартер

предоставлено этим руководством.

ссылка

В конце концов, если вам не нужно использовать AngularJS, я рекомендую вам использовать angular (6 прямо сейчас).

0 голосов
/ 16 июля 2018

Это может быть связано с тем, что контроллер зарегистрирован в модуле "members.authentication.controllers" , а маршрутизатор зарегистрирован в модуле "members.routing" .

Попробуйте зарегистрировать маршрутизатор и контроллер с тем же модулем.

0 голосов
/ 15 июля 2018

На основании приведенных выше комментариев фактически учебник использует ng-view в index.html. Поскольку вы не указали целые модули, включенные в приложение, выявить проблемы сложнее.

Лучше, если вы пройдете через official documentation и сравните, что вы сделали неправильно.

Также вот working Demo вышеупомянутого урока, который я нашел на GitHub. Надеюсь, это поможет, и вы можете изменить в соответствии с вашими потребностями.

0 голосов
/ 16 июля 2018

Ознакомьтесь с официальной документацией $ route и ngRoute .

работает Демо согласно коду, который вы опубликовали в посте.

Код JavaScript: 

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

app.controller('HomeController', function ($scope) {
   $scope.heading = "Home";
});

app.controller('RegisterController', function ($scope) {
   $scope.heading = "Register";

   $scope.register = register;

   function register(){
     // this is calling the register method of the Authentication service
     alert("register view call");
   }
});

app.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    }).
    when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

HTML код: 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
<script type="text/ng-template" id="home.html">
    <h1> {{heading}} </h1>
</script>

<script type="text/ng-template" id="register.html">
    <h1> {{heading}} </h1>

    <form role="form" ng-submit="register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <!-- ng-model responsible for storing values -->
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
</script>

<div> 
      <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/register">Register</a>
      </div>

    <div ng-view></div>
</div>
0 голосов
/ 28 июня 2018

Если вы используете ngRoute, у вас должно быть несколько вещей,

  1. директива ng-view
  2. * маршруты +1006 *
  3. и место для запуска ваших маршрутов

У вас должен быть основной шаблон, скажем, appController.html 

<nav-bar>Your nav bar goes here</nav-bar>
<div ng-view class="view-animate"></div>

И тогда вы можете иметь свои маршруты в конфигурации вашего приложения 

(function (angular) {
angular.module('DemoApp', ['ngRoute'])

.config(['$routeProvider', '$locationProvider',
   function ($routeProvider, $locationProvider) {
       $routeProvider.
       when('/register', {
           templateUrl: 'register.html',
           controller: 'RegisterCtrl',
           controllerAs: 'vm'
       }).otherwise({
           redirectTo: '/'
       });
   }]).controller('RegisterCtrl', function () {
       var vm = this;
   });
})(window.angular);

А затем в вашей навигации добавьте тег привязки для запуска маршрута, 

<li><a href="#/register">Register</a></li>

Подробнее о ng-route смотрите в документации здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...