我正在使用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文件
组件/登录注册/login-registerTemplate.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>