Search code examples
pythonhtmlangularjstornado

Python Tornado Angular JS - Html file not found (ui-router)

In my code

File Structure:
App-
 |--- static
 |      |--- css
 |      |--- js
 |            |--- app.js 
 |   
 |--- templates
 |      | --- header.html
 |      | --- template.html
 |      | --- footer.html
 |      | --- index.html
 |--- startup.py

startup.py: Here is the settings that tells tornado where to find the files

settings = dict (
    template_path = os.path.join(os.path.dirname(__file__), "templates"),
    static_path = os.path.join(os.path.dirname(__file__), "static"),
    debug = True
)

app.js: Here is the angular js that config the route by using ui-router

var app = angular.module('app', [
    'ui.router'
  ]);

app.config(['$urlRouterProvider', '$stateProvider', 
    function($urlRouterProvider, $stateProvide) { 
        $urlRouterProvider.otherwise('/');

        $stateProvide
        .state('template', {
            url:'/',
            templateUrl: 'template.html',
            controller: 'myController'
        })
}])

index.html: Here is the template file

<!DOCTYPE html>
<html>

<head >
    <title>
    </title>

    <script type="text/javascript" src=" {{ static_url('lib/js/angular.js') }}"></script>
    <script type="text/javascript" src=" {{ static_url('lib/js/angular-ui-router.js') }}"></script>
    <script type="text/javascript" src=" {{ static_url('lib/js/jquery-3.2.0.js') }}"></script>
    <script type="text/javascript" src=" {{ static_url('lib/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src=" {{ static_url('js/app.js') }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ static_url('lib/css/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static_url('css/app.css') }}">

</head>


<body ng-app='app'>

    <header ng-include src="'header.html'"></header>

    <div ui-view>

    </div>
    <footer ng-include src="'footer.html'"></footer>
</body>

Now my question is: The header.html and footer.html which I am using ng-include in index.html are not found. In the app.js, the templateUrl: 'template.html'; also not found. It is work when I am not using the tornado as server. But in tornado server, it's doesn`t work anymore. Please help me. Thanks

Solution

  • In tornado, all files in the static directory are served automatically, but this is not true of templates. You need one or more RequestHandlers to serve the template files (and to do whatever server-side work is needed to fill in the template variables. If there aren't any template variables, maybe these should be static files instead). Also remember that angular will see the url at which these files are served, which may or may not be the filename on disk depending on how you set up routes in your tornado application.