Tornado web server works bad with AngularJS operat

I run code ( get from http://plnkr.co/edit/WHcjcEHdny0yhM2Rs95d?p=preview) on 2 different server - Tornado and Apache.

index.html:

<!DOCTYPE html>
<html ng-app="contestantApp">

  <head>
    <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script src="/static/js/script.js"></script>
  </head>

  <body >
    <h1>Contestants</h1>
    <section ng-controller="ContestantsCtrl as ctrl">
      <ul>
        <li ng-repeat="contestant in ctrl.contestants">
                      {{contestant.firstName}} {{contestant.lastName}}

        </li>
      </ul>
      <form ng-controller="ContestantEditorCtrl as editorCtrl">
        <h2>New Contestant</h2>
        <fieldset>
          <label>
            First name
            <input ng-model="editorCtrl.contestant.firstName">
          </label>
          <label>
            Last name
            <input ng-model="editorCtrl.contestant.lastName">
          </label>
          <button ng-click="editorCtrl.save()">Save</button>
        </fieldset>
      </form>
    </section>
  </body>

</html>

script.js :

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

app.controller('ContestantsCtrl', function() {

  this.contestants = [
    {firstName: 'Rachel', lastName: 'Washington'},
    {firstName: 'Joshua', lastName: 'Foster'},
    {firstName: 'Samuel', lastName: 'Walker'},
    {firstName: 'Phyllis', lastName: 'Reynolds'}
  ];

});

app.controller('ContestantEditorCtrl', function($scope) {

  this.contestant = {};

  this.save = function() {
    $scope.ctrl.contestants.push(this.contestant);
    this.contestant = {};
  };

});

1) Tornado give me that error

HTTPServerRequest(protocol='http', host='localhost:8888', method='GET', uri='/', version='HTTP/1.1', remote_ip='::1', headers={'Accept-Language': 'en-US,en;q=0.8,fr;q=0.6,ru;q=0.4', 'Accept-Encoding': 'gzip, deflate, sdch', 'Host': 'localhost:8888', 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8', 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36', 'Connection': 'keep-alive', 'Cookie': '__ngDebug=true', 'Pragma': 'no-cache', 'Cache-Control': 'no-cache'})

Traceback (most recent call last):

File "/Users/asp/projects/trialsapi/venv/lib/python2.7/site-packages/tornado/web.py", line 1332, in _execute result = method(*self.path_args, **self.path_kwargs) File "/Users/asp/projects/trialsapi/tornadoapp.py", line 26, in get self.render("index.html")

File "/Users/asp/projects/trialsapi/venv/lib/python2.7/site-packages/tornado/web.py", line 665, in render html = self.render_string(template_name, **kwargs)

File "/Users/asp/projects/trialsapi/venv/lib/python2.7/site-packages/tornado/web.py", line 772, in render_string return t.generate(**namespace)

File "/Users/asp/projects/trialsapi/venv/lib/python2.7/site-packages/tornado/template.py", line 278, in generate return execute()

File "_index_html.generated.py", line 5, in _tt_execute _tt_tmp = contestant.firstName # index.html:14

NameError: global name 'contestant' is not defined ERROR:tornado.access:500 GET / (::1) 3.61ms

2) Apache works good and show me what I want.

What Am I do wrong? , Looks like tornado doesn't work with {{}} operator?

回答1:

RequestHandler.render is for processing Tornado templates, which use {{ }} for expression substitution (same as Angular). If you use Angular templates, you can either serve this HTML as a static file instead of running it through the template engine, or replace the opening braces with {{!. Tornado will remove the exclamation point and leave the rest alone to be processed by angular.

回答2:

You can overwrite angular {{ }} with some thing like this.

var app = angular.module().config(function ($interpolateProvider) {$interpolateProvider.startSymbol('{[{').endSymbol('}]}');

回答3:

You can use:

<li ng-repeat="contestant in ctrl.contestants">
    {{!contestant.firstName}} {{!contestant.lastName}}
</li>

Just use "!" before the variable name.

I hope that will work.