我正在开发一个使用 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 的末尾。
mainController中的代码如下
'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")
}]);
然后我有文件 Components/login-register/login-registerController.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>关于javascript - ngRoute 不改变 HTML。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44623391/