Flask + AngularJS的基本ToDo应用程序问题

时间:2015-04-14 16:41:54

标签: python angularjs flask

最近两天我试图弄清楚如何用烧瓶后端设置angularjs。我有 init .py文件

的代码
    1 from flask import Flask, render_template, jsonify, send_file, request
  2 from flask.ext.triangle import Triangle
  3 
  4 app = Flask(__name__, static_path='/static')
  5 Triangle(app)
  6 app.debug() = True
  7 
  8 @app.route('/')
  9 def homepage():
 10     return render_template('home.html')
 11 
 12 @app.route('/todo')
 13 def todos():
 14     return render_template('todo.html')
 15 
 16 if __name__ == "__main__":
 17     app.run()

和这个基本的待办事项应用程序,当我在我的计算机上尝试时,它正在工作。当我将它上传到我的服务器并尝试转到/ todo url时,我得到500内部服务器错误。

    <!doctype html>
<html ng-app>

<head>
</head>

<body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
        <span>{{remaining()}} of {{todos.length|angular}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ]
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done|angular}}">{{todo.text|angular}}</span>
            </li>
        </ul>
        <form ng-submit="addTodo()">
            <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
            <input class="btn-primary" type="submit" value="add">
        </form>
    </div>
    <script>

        function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}
    </script>

        <script src="{{ url_for('static', filename='/js/angular.js') }}"></script>
</body>
</html>

任何想法如何解决?我尝试将角度代码放在/ static / js文件夹中的app.js中,但仍无法正常工作

1 个答案:

答案 0 :(得分:0)

首先在调试中运行你的应用程序

app.run(debug=True)

这应提供有关您的错误的更多信息

第二个iirc Triangle要求您将角度过滤器传递给角度模板标签

<li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done|angular}}">{{todo.text|angular}}</span>
        </li>