Hemant Vishwakarma: Angular routing isn't displaying template

When I click on my Register link it goes to the proper URL but nothing is displayed
routing code:

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

controller:

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

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

edit:

<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">
        
          <li><a href="/login">Login</a></li>
          <li><a href="/register">Register</a></li>
        
      </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="/" />

  Liquid error: This liquid context does not allow includes.
</head>

<body>
  Liquid error: This liquid context does not allow includes.

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

  Liquid error: This liquid context does not allow includes.
</body>
</html>

I'm using Angular 1.7 and this tutorial https://thinkster.io/django-angularjs-tutorial#learning-django-and-angularjs. I'm not sure why the URL is correct but the template won't appear, the console doesn't show any error. And if I remove the HTML file from the path the console does correctly throw a 404 for it

from Angular routing isn't displaying template

Hemant Vishwakarma

Friday 13 July 2018

Angular routing isn't displaying template

No comments:

Post a Comment