当我单击“注册”链接时，它会转到正确的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
答案 0 :(得分：3)
按照您在帖子中发布的代码工作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>
答案 1 :(得分：1)
基于以上评论，本教程实际上在index.html中使用ng-view。由于您没有提供应用程序涉及的全部模块，因此很难确定问题所在。
最好通过 official documentation 并比较您做错了什么。
这也是我在GitHub上找到的以上教程的 working Demo 。希望这会有所帮助，您可以根据需要的方式进行修改。
答案 2 :(得分：1)
首先，通过在运行部分中输入“ alert”或“ console”，检查您的角度是否正在运行。
然后以相同的方式检查您的控制器。 请提供一个演示。
或：
只需复制此工作演示
// 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）。
答案 3 :(得分：0)
如果您使用的是ngRoute，则必须具备一些条件，
您应该有一个主模板，例如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>
在文档here.中了解有关ng-route的更多信息
答案 4 :(得分：0)
这可能是因为控制器是通过“ membership.authentication.controllers” 模块注册的，而路由器是通过“ membership.routing” 模块注册的。 / p>
尝试使用相同模块的Regigstring路由器和控制器。