How to get Angular-Flask app to load html partials?

Question

I am trying to get my Angular-Flask App to render partial HTML files in a base html file. The application loads the base html (Window Title and Footer load) but nothing loads for the ng-view. Perhaps my angular routing to the partials is not correct? File Structure ``` ->flaskapp ->static ->js ->appController.js ->routing.js ->homeController.js ... ->views ->home ->__init__.py ... ->templates ->partials ->home.html ... ->base.html ``` home ``` mod = Blueprint('home', __name__) @mod.route('/') def index(): return render_template('main.html') ``` base.html ```

Accepted Answer

Flask doesn't serve files from the `templates` folder. If you wish to keep `home.html` in there, you will need to define a route that matches the URL and serves the file. You can use this as a starting point.

```
@app.route('/partial/<path:path>')
def serve_partial(path):
    return render_template('/partial/{}'.format(path))
```

If you don't want to have to create such a view, you can also move the partial templates into `static`. If your directory structure looked like

```
static
|---- partial
|     |---- home.html
```

you'd be able to access the template with

```
app.config(function($routeProvider){
    $routeProvider.when('/', {
        templateURL: '/static/partials/home.html',
        controller: 'HomeController'    
    }).otherwise({ redirectTo: '/' });
});
```

How to get Angular-Flask app to load html partials?

Solution

Problem