ngRoute not changing HTML.
Question
I am working on an app using angularjs, specifically the ngRoute module. Right now, I want to click on a link to change the URL, and load a different HTML template.
The HTML that is supposed to do this (stored in a file called nameReminder.html) is
<!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>
Note the href tag in the second to last line. When you click on this tag, it is supposed to change the URL to add /login-register to the end of the current URL.
The code in mainController is as follows
'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")
}]);
and then I have the file 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");
}
]);
and the HTML file components/login-register/login-registerTemplate.js which contains
<md-button>hello world</md-button>
<p>hello_world</p>
What happens right now is that the URL changes, but no extra HTML loads for either URL! It just shows the HTML in nameReminder.html. What could be going on here? I've looked all over stack overflow and I think that I'm doing everything right. I even recently did a similar project and this technique seemed to work! What am I doing wrong?
2 answers
solution1
0 2017-06-19 06:17:53
You should add ng-view in main html file. and also remove ng-controller="MainController" because it injected by route where you defined controller: 'oneController' .
<html ng-app = "nameReminderApp">
<head>
</head>
<md-button>Hello!</md-button>
<a href="#!/login-register">login</a>
<div ng-view=""></div>
</html>
solution2
0 ACCPTED 2017-06-19 06:50:22
I think you are missing ng-view directive. If there is not a container to show the content, how are we going to see it? ;)
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.