ngRoute not changing HTML.

Issue

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?

Solution

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>

Answered By – FerSomo11

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.