AngularJS + Flask Client-Side Routing

Question

I have an application with an AngularJS frontend and a Flask backend.

I have the following routes in Flask to send all requests to the index.html file (as well as some routes for API routes):

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/api/colours')
def colours():
    ...

@app.route('/<path:page>')
def fallback(page):
    return redirect(url_for('home'))

I'm then using the Angular StateProvider for the client-side routing:

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'static/templates/home.html'
    })
    .state('contact', {
        url: '/contact', 
        templateUrl: 'static/templates/contact.html'
    });

This works great if I start at the root of my website and click a link to take me to the contact page. However, if I want to go to straight to the contact page by typing in mysite.com/contact it redirects the homepage. Which is expected.

How can I allow it go to the client side route if it's available, else redirect to home page?

What do you mean by "Which is expected"? it has to show you contact.html right? — user3411864
– user3411864, Commented Aug 22, 2017 at 13:56
I meant it's expected because the server-side routing rule says redirect home, as it doesn't know about /contact. — DJDMorrison
– DJDMorrison, Commented Aug 22, 2017 at 14:06

Žilvinas Rudžionis · Accepted Answer · 2017-08-22 13:59:40Z

3

From server side if you encounter home or unknown route (404) you should return index.html since you don't know if client side can handle this route. After index.html is loaded client side routing should take over and decide whether to redirect to Not found or handle this route in some other way.

@app.route('/<path:page>')
def fallback(page):
    return render_template('index.html')

answered Aug 22, 2017 at 13:59

Žilvinas Rudžionis

2,38826 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DJDMorrison Over a year ago

That works. Rendering index.html is correct instead of routing to home and rendering index.html from there. Thanks @Žilvinas!

Joanteixi Over a year ago

Also for Angular > 2!

Kyrylo Malakhov Over a year ago

Yes, this works for Angular 11+. Now we need to make 404 with Angular. let's Angular do the job!

Collectives™ on Stack Overflow

AngularJS + Flask Client-Side Routing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related