CODEWITHSUNDEEP
javascripthtmlangularjs
bubbles2189
bubbles2189

Reputation: 159

Cannot redirect to another page using ngroute

So I am using ngroute to like redirect to other html pages. I got this off from a tutorial online but when I try to run, it does not show the message or it doesn't go the desired page. For example, if I want to click on the homepage on the nav bar, it should redirect to the homepage. If I want to redirect to login page, it should go to login page. I am not sure what is wrong. enter code hereThis is what I have:

index.html

<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title>Quiz HomePage</title>
<link rel="stylesheet" href="cs/homepage.css">
<script src="lib/angular.js"></script>
<script src="js/home.js"></script>
<!-- NG ROUTE -->
<script type="text/javascript" src="i"></script>

</head>
<body ng-controller="mainController">
    <h1>Welcome To The Online Quiz Management</h1>

    <div id="navigationBar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li style="float: right"><a href="#login">Login</a></li>
        </ul>
    </div>

    <!-- angular templating -->
    <!-- this is where content will be injected -->
    <div ng-view></div>
</body>
</html>

home.js

// creating the module
var app = angular.module("homepageApp", ["ngRoute"]);

// configure our routes
app.config(function($routeProvider) {
    $routeProvider

        // route for the homepage
        .when("/homepage", {
            templateUrl: "homepage.html",
            controller: "mainController"
        })
        // route for login
        .when("/login", {
            templateUrl: "login.html",
        })
        // route for about
        .when("/about", {
            templateUrl: "about.html",
            controller: "aboutController"
        })
        // route for contact
        .when("/contact", {
            templateUrl: "contact.html",
            controller: "contactController"
        });
});

// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
    $scope.message = 'Everyone come our homepage';
});

app.controller("loginController", function($scope) {

});

about.html

<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
    <h1>About Page</h1>

    <p>{{ message }}</p>
</body>
</html>

Upvotes: 4

Views: 567

Answers (1)

Vijay Venugopal Menon
Vijay Venugopal Menon

Reputation: 1520

As @Barclick said, you have to import angular-route correctly. Since you are using angularjs from your local, not sure which version you are using. There have been some changes to the library from version 1.6+ . Please look at the detailed answer here : https://stackoverflow.com/a/41655831/6347317

I have created a plunker with angular 1.6+ . Please see below:

http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview

Note: Please see the way the route is referenced in HTML "#!route". 

HTML:
<!DOCTYPE html>
<html ng-app="homepageApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="mainController">
    <h1>Welcome To The Online Quiz Management</h1>

    <div id="navigationBar">
        <ul>
            <li><a href="#!">Home</a></li>
            <li><a href="#!about">About</a></li>
            <li><a href="#!contact">Contact</a></li>
            <li style="float: right"><a href="#!login">Login</a></li>
        </ul>
    </div>

    <!-- angular templating -->
    <!-- this is where content will be injected -->
    <div ng-view></div>
  </body>

</html>

JS:

// creating the module
var app = angular.module("homepageApp", ['ngRoute']);

// configure our routes
app.config(function($routeProvider) {
    $routeProvider

        // route for the homepage
        .when('/', {
            templateUrl: 'homepage.html',
            controller: 'mainController'
        })
        // route for login
        .when('/login', {
            templateUrl: 'login.html',
        })
        // route for about
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutController'
        })
        // route for contact
        .when('/contact', {
            templateUrl: 'contact.html',
           // controller: 'contactController'
        });
});

// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
    $scope.message = 'Everyone come our homepage';
});

app.controller("aboutController", function($scope) {
  $scope.message = 'Everyone come our about page';
});

Upvotes: 3

Related Questions