Menu
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);
}
}
})();
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. [email protected]" />
</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">
{% 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')
}
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
665
Have a look in to the official documentation of $route and ngRoute.
working Demo as per the code you posted in the post.
JavaScript code :
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 code :
<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. [email protected]" />
</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>
Based on the comments above, actually the tutorial uses ng-view in the index.html. Since you have not given the whole modules involved in the application, it is harder to identify the issues.
It's better if you go through the official documentation and compare what you've done it wrong.
Also here is the working Demo of the above tutorial i found on GitHub. Hopefully this would help and you can modify according to the way you need.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
