Skip to content Skip to sidebar Skip to footer

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 p

Solution 1:

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><htmlng-app="homepageApp"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');</script><linkhref="style.css" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script><scriptsrc="app.js"></script></head><bodyng-controller="mainController"><h1>Welcome To The Online Quiz Management</h1><divid="navigationBar"><ul><li><ahref="#!">Home</a></li><li><ahref="#!about">About</a></li><li><ahref="#!contact">Contact</a></li><listyle="float: right"><ahref="#!login">Login</a></li></ul></div><!-- angular templating --><!-- this is where content will be injected --><divng-view></div></body></html>

JS:

// creating the modulevar 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';
});

Post a Comment for "Cannot Redirect To Another Page Using Ngroute"