当我点击我的注册链接时，它转到了正确的 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('/');
}
})();
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);
}
}
})();
注册.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
最佳答案
工作 Demo根据您在帖子中发布的代码。
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>
关于javascript - Angular 路由不显示模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51073399/