Flask and Angular Ui-Router

Question

I am trying to setup angular ui-router with Flask as the server-side language. I am having trouble loading up partials in my ui-view. Here is my directory structure

and my routes look like this:

(function () {
    'use strict';

    angular
        .module('dvgo-admin')
        .config(config);

    config.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];

    function config($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });

        $urlRouterProvider.otherwise('/');

        $stateProvider.
            state('matching-console', {
                url: '/matching-console',
                templateUrl: '/dogvacay-admin/templates/matching-console.view.html',
                controller: 'MatchingConsoleController as vm'
            })
    }

}());

What is the proper way to have flask serve my partials correctly?

Answer 1

Your folder Structure is fine But you need to serve index.html for "/" route through flask. In flask you can define a route for "/" like:

basedir = os.path.abspath( os.path.join( os.path.dirname(__file__), os.pardir ))

app.static_folder = os.path.join(basedir, 'client') # Add static folder directory

@app.route("/")
    def index():
        return app.send_static_file('index.html')

This way you can render index.html file from flask. Once the index is loaded angular ui-router will take care of browser routings.