我正在使用angularjs开发一个应用程序，特别是ngRoute模块。现在，我想单击链接以更改URL，并加载不同的HTML模板。
应该执行此操作的 HTML(存储在名为 nameReminder.html 的文件中)是
<!doctype html>
<html ng-app = "nameReminderApp" ng-controller="MainController">
<head>
<!--Angular scripts-->
<link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
<script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
<script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="mainController.js"></script>
<!--Component scripts and stylesheets-->
<link rel="stylesheet" type="text/css" href="components/login-register/login-register.css">
<script type="text/javascript" src = "components/login-register/login-registerController.js"></script>
<script type="text/javascript" src = "components/quiz/quiz-Controller.js"></script>
</head>
<md-button>Hello!</md-button>
<a href="#!/login-register">login</a>
</html>
请注意倒数第二行中的 href 标记。当您单击此标签时，它应该更改 URL 以将/login-register 添加到当前 URL 的末尾。
主控制器中的代码如下
'use strict';
//included theme
var nameReminderApp = angular.module('nameReminderApp', ['ngRoute', 'ngMaterial', 'ngResource']).config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('light-green')
.accentPalette('orange');
});
nameReminderApp.config(['$routeProvider', '$resourceProvider',
function($routeProvider) {
$routeProvider.
when('/login-register', {
title: 'Login',
templateUrl: 'components/login-register/login-registerTemplate.html',
controller: 'LoginRegisterController'
}).
when('/quiz', {
title: 'Login',
templateUrl: 'components/quiz/quiz-Template.html',
controller: 'QuizController'
}).
otherwise({
redirectTo: '/quiz'
});
}
]);
nameReminderApp.controller('MainController', ['$scope', '$rootScope', '$location', '$routeParams', '$resource', '$http',
function($scope, $rootScope, $location, $routeParams, $resource, $http) {
console.log("HERE")
}]);
然后我有文件组件/登录注册/登录注册控制器.js
'use strict';
nameReminderApp.controller('LoginRegisterController', ['$scope', '$routeParams', '$resource', '$location', '$rootScope',
function($scope, $routeParams, $resource, $location, $rootScope) {
console.log("Hello in login");
}
]);
和 HTML 文件 组件/登录注册/登录注册模板.js 其中包含
<md-button>hello world</md-button>
<p>hello_world</p>
现在发生的事情是 URL 更改，但两个 URL 都没有额外的 HTML 加载！它只是在nameReminder.html中显示HTML。这到底是怎么回事？我已经查看了堆栈溢出，我认为我做的一切都是正确的。我最近甚至做了一个类似的项目，这种技术似乎有效！我做错了什么？
我认为您缺少ng-view指令。如果没有容器来显示内容，我们将如何看到它？;)
angular.module('myApp', ['ngRoute']);
angular.module('myApp')
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login-register', {
title: 'Login',
template: '<div><h2>Hello World Login</h2><p>{{ loginCtrl.loginMessage }}</p></div>',
controller: 'LoginRegisterController',
controllerAs: 'loginCtrl'
}).
when('/quiz', {
title: 'Login',
template: '<div><h2>Hello World Quiz</h2><p>{{ quizCtrl.quizMessage }}</p></div>',
controller: 'QuizController',
controllerAs: 'quizCtrl'
}).
otherwise({
redirectTo: '/quiz'
});
}
]);
angular.module('myApp')
.controller('LoginRegisterController', LoginRegisterController)
function LoginRegisterController() {
var vm = this;
vm.loginMessage = 'Login Ctrl';
}
angular.module('myApp')
.controller('QuizController', QuizController)
function QuizController() {
var vm = this;
vm.quizMessage = 'Quiz Ctrl';
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body>
<h1>Hello there!</h1>
<a href="#!/login-register">To login</a>
<a href="#!/quiz">To Quiz</a>
<a href="#!/not-defined-url">Invalid redirects to quiz</a>
<div ng-view></div>
</body>
</html>您应该在主 html 文件中添加ng-view。 并删除ng-controller="MainController"，因为它是由您定义controller: 'oneController'的路由注入的。
<html ng-app = "nameReminderApp">
<head>
</head>
<md-button>Hello!</md-button>
<a href="#!/login-register">login</a>
<div ng-view=""></div>
</html>