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. 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"> {% 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
5 Answers
Answers 1
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. 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> Answers 2
If you are using ngRoute you have to have couple of things,
- ng-view directive
- routes
- and a place to trigger your routes
You should have a main template let's say appController.html
<nav-bar>Your nav bar goes here</nav-bar> <div ng-view class="view-animate"></div> And then you can have your routes in your app config
(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); And then in your navigation add an anchor tag to trigger the route,
<li><a href="#/register">Register</a></li> Learn more on ng-route in the documentation here.
Answers 3
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.
Answers 4
It could be because of the reason that controller is registered with "membership.authentication.controllers" module while router is registered with "membership.routing" module.
Try registring router and controller with same module..
Answers 5
First of all check if your angular is running by putting "alert" or "console" in your run section.
Then check your controller in the same way. please provide a demo.
OR:
simply copy this working demo
// 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.'; }); provided by this tutorial.
After all if you don't have to use AngularJS I recommend you to use angular (6 right now).
0 comments:
Post a Comment