angularjs unable to find templates directory, flask as backend

Question

I am using flask as backend and angularjs on client-side

my directory structure:

dew:

  ->app.py

  ->templates
    ->hello.html
    ->test.html

  ->static
    ->js
      ->directives.py
    ->lib
      ->angular.js

my app.py file:

from flask import Flask, make_response,render_template
@app.route("/aboutUs")
def aboutUs():
    return render_template("test.html", title="test page")

my directives.py file :

angular.module('components',[])
    .directive("helloWorld",function($scope,$log){
        $scope.$log = $log;
        return{
            restrict:"A",
            templateUrl:"templates/hello.html"
        }
    })

angular.module('testApp',['components'])

Flask was able to render the test.html template properly, but angular was showing hello.html, template not found error

Answer 1

1. Jinja template

If hello.html contains Jinja2 markup then it is a template and needs to be rendered by Flask. Add an @app.route to render it.

@app.route("/hello")
def hello():
    return render_template("hello.html")

Then point to the hello URL in the Angular directive.

templateUrl: "{{ url_for('hello'}} }}"

2. Angular template

If the file contains only HTML (no Jinja2 markup), then it is not a template. It should not be in the templates folder but in the static folder; like static/angular_templates/hello.html.

Then point to the static file in the directive.

templateUrl: "{{ url_for('static', filename='angular_templates/hello.html') }}"