javascript - Cannot redirect to another page using ngroute -
so using ngroute redirect other html pages. got off tutorial online when try run, not show message or doesn't go desired page. example, if want click on homepage on nav bar, should redirect homepage. if want redirect login page, should go login page. not sure wrong. enter code herethis 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 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 --> <!-- content injected --> <div ng-view></div> </body> </html> home.js
// creating module var app = angular.module("homepageapp", ["ngroute"]); // configure our routes app.config(function($routeprovider) { $routeprovider // route homepage .when("/homepage", { templateurl: "homepage.html", controller: "maincontroller" }) // route login .when("/login", { templateurl: "login.html", }) // route .when("/about", { templateurl: "about.html", controller: "aboutcontroller" }) // route contact .when("/contact", { templateurl: "contact.html", controller: "contactcontroller" }); }); // create controller , 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>
as @barclick said, have import angular-route correctly. since using angularjs local, not sure version using. there have been changes library version 1.6+ . please @ detailed answer here : https://stackoverflow.com/a/41655831/6347317
i have created plunker angular 1.6+ . please see below:
http://plnkr.co/edit/xdosh3osdkcbftpjn6qj?p=preview
note: please see way route 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 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 --> <!-- content injected --> <div ng-view></div> </body> </html> js:
// creating module var app = angular.module("homepageapp", ['ngroute']); // configure our routes app.config(function($routeprovider) { $routeprovider // route homepage .when('/', { templateurl: 'homepage.html', controller: 'maincontroller' }) // route login .when('/login', { templateurl: 'login.html', }) // route .when('/about', { templateurl: 'about.html', controller: 'aboutcontroller' }) // route contact .when('/contact', { templateurl: 'contact.html', // controller: 'contactcontroller' }); }); // create controller , 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 page'; }); wiki
Comments
Post a Comment