Cannot redirect to another page using ngroute

Cannot redirect to another page using ngroute - javascript

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>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</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>

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>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right">Login</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';
});

Related

How to use Angular ng-include

I just started with angularjs on a Express Framework and I am trying to load html pages as includes. Now I've setup my routing in angular and works fine, but when I try to use ng-include in my html pages, it kinda loops and gives the following error:
Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…Be()%3Breturn%20d(a)%7D%22%2C%22newVal%22%3A%22nav-mobile.html%22%7D%5D%5D
at angular.js:38
at m.$digest (angular.js:18048)
at angular.js:18211
at e (angular.js:6274)
at angular.js:6554
Now I am trying to make an inlcude of the nav-bar-mobile.html to inject it into the page, but I do not get this working. Someone have an idea?
My routing looks like this:
var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);
/* ROUTING */
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
})
.when('/wie', {
templateUrl: 'partials/wie.html',
controller: 'aboutController'
})
.when('/portfolio', {
templateUrl: 'partials/portfolio.html',
controller: 'portfolioController'
})
.when('/channel', {
templateUrl: 'partials/channel.html',
controller: 'channelController'
})
.when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'contactController'
});
$locationProvider.html5Mode(true);
});
/* CONTROLLERS */
app.controller('homeController', function($scope) {
$scope.pageClass = 'home';
});
app.controller('aboutController', function($scope) {
$scope.pageClass = 'wie';
});
app.controller('portfolioController', function($scope) {
$scope.pageClass = 'portfolio';
});
app.controller('channelController', function($scope) {
$scope.pageClass = 'channel';
});
app.controller('contactController', function($scope) {
$scope.pageClass = 'contact';
});
And my index.html page looks like this:
<!DOCTYPE html>
<html ng-app="myApp" ng-init="CompanyName='MyApp'">
<head>
<title>My App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<!-- load bootstrap & font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' href='/stylesheets/style.css'>
<link rel='stylesheet' href='/stylesheets/mobile.css'>
<link rel='stylesheet' href='/stylesheets/font-awesome.css'>
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.js"></script>
<script src='/javascripts/app.js'></script>
<base href="/">
</head>
<body>
<div class="container">
<div class="logo">
<div class="wrap">
<img src="/images/my-logo.png" alt="my-logo" />
</div>
</div>
<div ng-include="'nav-bar-mobile.html'"></div>
<div class="box panels tinted">
<div class="page {{ pageClass }}" ng-view></div>
</div>
<div class="nav-bar desktop">
<div class="inner">
<ul>
<li>Home</li>
<li>Wie zijn wij?</li>
<li>Portfolio</li>
<li>My Channel</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>

You need to provide the full path of the HTML page if it is not in same folder.

Page Not found error, even routes are given angularJs

I'm developing Admin panel and user panel. Admin panel was working fine and the code was written in ExpressJs. Now i wanted to design my User panel in AngularJs. i created HTML pages and app.js page.
use strict;
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({redirectTo: '/home'});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
$http.get('json_files/record_'+$scope.params.userId+'.json').success(function(response) {
$scope.details = response;
});
})
.controller('homeController', function() {
});
This is my app.js file.
Below is my profile.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="http://localhost:8000/">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="profileController">
<table>
<thead>
<tr>
<td>CategoryID</td>
<td>CategoryName</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in categories">
<td>{{category.CategoryID}}</td>
<td>{{category.CategoryName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm getting the error as below whenever i'm trying to access the page as http://localhost:8000/profile/1
Not Found
The requested URL /profile was not found on this server.
Don't know whats going wrong... or where I did mistake...
Kindly suggest anything.

You are missing ng-view in your index page. All your routes will be replaced by this tag.
refer this link : https://docs.angularjs.org/api/ngRoute/directive/ngView
index.html
<html lang="en" ng-app="myApp" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html
<div> Home page
<a href="#/profile/1" >Go to Profile page</a>
</div>
profile.html
<div> Profile page
<a href="#/home" >Go to Home page</a>
<div>
app.js
(function() {
"use strict";
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$routeProvider.when('/profile/:userId', {
templateUrl: 'profile.html',
controller: 'profileController'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}])
.controller('profileController', function($scope, $http, $routeParams) {
$scope.params = $routeParams;
/*$http.get('json_files/record_' + $scope.params.userId + '.json').success(function(response) {
$scope.details = response;
});*/
})
.controller('homeCtrl', function() {})
.controller('profileController', function() {})
})();

You have to put your project root path first, then '#' and than the route.
Check https://docs.angularjs.org/tutorial/step_09 for more details.

Cannot get routes in AngularJS to work at all

So I started from scratch and rebuilt it as follows. Freshly downloaded angularJS (1.5.8) and I've simply deposited both angular.js and angular-route.js in the library folder. Set up like this: https://gyazo.com/311679bf07249109671d621bc89d2d52
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8">
</head>
<body ng-controller="MainController">
<div class="header">
<h1>Alice Birt Photography</h1>
</div>
<div class="navbar">
<ul>
<li>About Me</li>
<li>My Photography</li>
<li>My Blog</li>
</ul>
</div>
<div ng-view></div>
<div class="footer">
<ul>
<li>Facebook</li>
</ul>
</div>
<!-- JS-Library -->
<script type="text/javascript" src="library/angular.js"></script>
<script type="text/javascript" src="library/angular-route.js"></script>
<!-- JavaScript -->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/app.js"></script>
app.js
var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/blog', {
controller: 'BlogController',
templateUrl: 'page/blog.html'
})
.when('/photo', {
controller: 'PhotoController',
templateUrl: 'page/photography.html'
})
.when('/about', {
controller: 'AboutmeController',
templateUrl: 'page/aboutme.html'
})
});
app.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
app.controller('BlogController', function($scope, $routeParams) {
$scope.name = 'BlogController';
$scope.params = $routeParams;
})
app.controller('PhotoController', function($scope, $routeParams) {
$scope.name = 'PhotoController';
$scope.params = $routeParams;
})
app.controller('AboutmeController', function($scope, $routeParams) {
$scope.name = 'AboutmeController';
$scope.params = $routeParams;
})

What's the error you are getting, you need to give more details about it. Though you can try,
$routerProvider.otherwise(redirectTo: '/blog');
It automatically redirects to blog when no other route is loaded. and also I couldn't find ng-app directive in your html part, you should look into that.

Routing is not working in my web application when I refresh the page in the browser

When I type http://localhost:8000 in the browser, it is redirecting to http://localhost:8000/home. This is working fine as per code. When I refresh the page with same http://localhost:8000/home getting 404 error. Can anyone help me why this is happening and correct me.
app.js
var myapp=angular
.module("demo",['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
templateUrl:'Templates/home.html',
controller:'homeController'
})
.when('/about', {
templateUrl:'Templates/about.html',
controller:'aboutController'
})
.when('/contact',{
templateUrl:'Templates/contact.html',
controller:'contactController'
})
.otherwise({
redirectTo: '/home'
})
$locationProvider.html5Mode(true);
});
index.html
<!doctype html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="rest-controller.component.js"></script>
<script src="Controllers/contact.js"></script>
<script src="Controllers/about.js"></script>
<script src="Controllers/home.js"></script>
<base href="/">
</head>
<body>
<ol>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ol>
<div ng-view></div>
</body>
</html>
home.js (controller file)
angular.module('demo').controller("homeController", function($scope){
$scope.hello ="home";
});
about.js
angular.module('demo').controller("aboutController", function($scope){
$scope.tap="About Me";
});
contact.js
angular.module('demo').controller("contactController", function($scope){
$scope.message="hello";
});

Can you try disabling html5 mode?
// $locationProvider.html5Mode(true);

What url to reach "/phone" in an Angular project?

what url should I use to reach the "/phone" part from the routing? I am trying this http://localhost:8888/workspace/AngA/phones but the page is blank. Or maybe the url is correct, and I forgot something else.
Here is the whole code (2 html pages for the view, 2 js pages) :
//in home.html
<h1>home</h1>
<p>
Add a {{ test }}
</p>
----
//in index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view>hello</div>
</body>
</html>
----
//in app.js
'use strict';
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/home.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
----
//in controllers.js
'use strict';
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', function ($scope) {
$scope.test = 'age';
});
phonecatControllers.controller('PhoneDetailCtrl', function($scope, $routeParams){
});

You haven't specified html5mode so to access that page you would do something like this instead:
http://localhost:8888/workspace/AngA/#/phones

Develop Reference

JavaScript is the programming language of the Web.

Cannot redirect to another page using ngroute - javascript

Related

How to use Angular ng-include

Page Not found error, even routes are given angularJs

Cannot get routes in AngularJS to work at all

Routing is not working in my web application when I refresh the page in the browser

What url to reach "/phone" in an Angular project?

Categories

Resources