Pexilius Pexilius - 6 months ago 27
AngularJS Question

AngularJS - Redirect if url isn't correct

I'm building an app in angularjs with different states and have added a

$urlRouterProvider.otherwise("/");
to redirect people is they don't go to a state that I have set up.

Though I am having an issue when they go to an URL beyond the ones I have set up.
So for example, the following state is profile:

.state('profile', {
url: '/profile',
templateUrl: 'partials/profile.html',
controller: 'profileCtrl',
data: {
requiresLogin: true
},
resolve: {
$title: function() { return 'Profile'; }
}
});


Lets say I were to go to an url with /prof instead of /profile, I will get a redirect to home aka ("/").

Here is where the problem shows up: if I'd go to an url as followed: /profile/test, I will get alot of error in my console (image below)

error log

Extra Info(from comment):

I'll also give the server side code seeing the problem might be there with a redirect:

// Init Express Web Framework
var express = require('express');
var app = express();
var path = require('path');

// Set view engine to EJS & set views directory
app.set('view engine', 'ejs');
app.set('views', path.resolve(__dirname, 'client', 'views'));

app.use(express.static(path.resolve(__dirname, 'client')));

// Database Connection
var mongoose = require('mongoose');
var configDB = require('./server/config/database.js');
mongoose.connect(configDB.url);

var bodyParser = require('body-parser');
app.use(bodyParser.json());

// Main route
app.get('/', function(req, res){
res.render('index.ejs');
});

// API
var api = express.Router();
require('./server/routes/capture')(api);
app.use('/api', api);

// Set routes to other pages
app.get('/*', function(req, res){
res.render('index.ejs');
});

// Port Settings
app.listen(process.env.PORT || 3000, process.env.IP);
console.log('Listening on port ' + process.env.PORT);


and here is my workspace

workspace

Redirecting URL's that are not listed get redirected. Url's that are listed (for example /dashboard, /profile, ...) when adding something to the link, they don't get redirected. I have encountered these errors when I didn't add the controller to the main html, but that's just the thing.. I don't want to be able to surf to these links. All links that haven't been stated in app.js should be redirected.

Is there any way to fix this?

EDIT - Added 404:

I added a catch 404 in my server.js using this code:

// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});


This is the result:

Error: Not Found
at /home/ubuntu/workspace/server.js:31:15
at Layer.handle [as handle_request] (/home/ubuntu/workspace/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:312:13)
at /home/ubuntu/workspace/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:330:12)
at next (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:271:10)
at jsonParser (/home/ubuntu/workspace/node_modules/body-parser/lib/types/json.js:100:40)
at Layer.handle [as handle_request] (/home/ubuntu/workspace/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:312:13)
at /home/ubuntu/workspace/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:330:12)
at next (/home/ubuntu/workspace/node_modules/express/lib/router/index.js:271:10)
at SendStream.error (/home/ubuntu/workspace/node_modules/express/node_modules/serve-static/index.js:120:7)
at emitOne (events.js:77:13)
at SendStream.emit (events.js:169:7)
at SendStream.error (/home/ubuntu/workspace/node_modules/express/node_modules/send/index.js:245:17)

Answer

Unexpected token "<" usualy means html content instead of js.
angular is not defined means your angular.js even has not to be loaded.

Check your server and Network tab in the browser.
Which urls used to load your js scripts?
What response browser gets on these urls?

Fix js urls to correct and errors will gone.

You may be wrong with your .htaccess also.
Check you not redirect existed static files inside it.
It is -f flag in the RewriteRule directive.


I take a look to your bug animation :)

Your scripts are defined as src="lib/angular.js".
This urls are relative, and on /profile page will be /profile/lib/....

What you need is absolute urls: src="/lib/angular.js"