Вход для api restfull в angularjs и фляги?

Я сделал палочку, чтобы создать логин для полной загрузки api. Я хочу создать подобное приложение, когда первая страница открывается, а затем всплывает с помощью страницы входа. Как я хочу сделать Пожалуйста, см. ДЕМО. Это разработано в нокауте + колба rest-api. Я хочу сделать то же самое, но я хочу использовать Angularjs вместо Knockout.

Мой код DEMO, в этом я удаляю все остальные коды. Просто хочу, когда загрузка страницы загружается с логином, и когда я вставляю правильные учетные данные, войдите в rest-api.

rest-server.py

import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template 
from flask.ext.httpauth import HTTPBasicAuth

app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()


@auth.get_password
def get_password(username):
    if username == 'admin':
        return '1234'
    return None


@auth.error_handler
def unauthorized():
    return make_response(jsonify({'error': 'Unauthorized access'}), 403)


@app.errorhandler(400)
def bad_request(error):
    return make_response(jsonify({'error': 'Bad request'}), 400)


@app.errorhandler(404)
def not_found(error):
    return make_response(jsonify({'error': 'Not found'}), 404)


tasks = [
    {
        'id': 1,
        'title': u'Buy groceries',
        'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
        'done': False
    },
    {
        'id': 2,
        'title': u'Learn Python',
        'description': u'Need to find a good Python tutorial on the web',
        'done': False
    }
]


def make_public_task(task):
    new_task = {}
    for field in task:
        if field == 'id':
            new_task['uri'] = url_for('get_task', task_id=task['id'],
                                      _external=True)
        else:
            new_task[field] = task[field]
    return new_task

@app.route('/')
@auth.login_required
def index():
   return render_template('index.html')

@app.route('/todo/api/v1.0/tasks', methods=['GET'])
@auth.login_required
def get_tasks():
    return jsonify({'tasks': [make_public_task(task) for task in tasks]})


@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
@auth.login_required
def get_task(task_id):
    task = [task for task in tasks if task['id'] == task_id]
    if len(task) == 0:
        abort(404)
    return jsonify({'task': make_public_task(task[0])})


@app.route('/todo/api/v1.0/tasks', methods=['POST'])
@auth.login_required
def create_task():
    if not request.json or 'title' not in request.json:
        abort(400)
    task = {
        'id': tasks[-1]['id'] + 1,
        'title': request.json['title'],
        'description': request.json.get('description', ""),
        'done': False
    }
    tasks.append(task)
    return jsonify({'task': make_public_task(task)}), 201


@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
@auth.login_required
def update_task(task_id):
    task = [task for task in tasks if task['id'] == task_id]
    if len(task) == 0:
        abort(404)
    if not request.json:
        abort(400)
    if 'title' in request.json and \
            not isinstance(request.json['title'], six.string_types):
        abort(400)
    if 'description' in request.json and \
            not isinstance(request.json['description'], six.string_types):
        abort(400)
    if 'done' in request.json and type(request.json['done']) is not bool:
        abort(400)
    task[0]['title'] = request.json.get('title', task[0]['title'])
    task[0]['description'] = request.json.get('description',
                                              task[0]['description'])
    task[0]['done'] = request.json.get('done', task[0]['done'])
    return jsonify({'task': make_public_task(task[0])})


@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
@auth.login_required
def delete_task(task_id):
    task = [task for task in tasks if task['id'] == task_id]
    if len(task) == 0:
        abort(404)
    tasks.remove(task[0])
    return jsonify({'result': True})


if __name__ == '__main__':
    app.run(debug=True)

Мой угловой код angularjs.html

<!DOCTYPE html>
<html>

  <head>
    <title>ToDo API Client Demo By Angularjs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="tasksCtrl">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">ToDo API Client Demo</a>
      </div>
    </div>
    <div>

         <a class="btn" data-toggle="modal" data-target="#login">Login</a>
    </div>
    <div>
      <table class="table table-striped">
        <tbody>
          <tr>
            <td style="width: 1px;"></td>
            <td>
              <b>Task</b>
            </td>
            <td>
              <b>Options</b>
            </td>
          </tr>
          <tr ng-repeat="task in tasks">
            <td>
              <span ng-show="done" class="label label-success">Done</span>
              <span ng-hide="done" class="label label-important">In Progress</span>
            </td>
            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
            <td>
              <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
            </td>
            <td>
              <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
            </td>
            <td ng-show="done">
              <span>
                <button ng-click="done = !done" class="btn">Mark In Progress</button>
              </span>
            </td>
            <td ng-hide="done">
              <span>
                <button ng-click="done = !done" class="btn">Mark Done</button>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
    </div>
    <div id="modal" role="dialog" class="modal hide fade">
      <div>
        <div class="modal-header">
                    Task Dialog
                </div>
        <div class="modal-body">
          <label for="txtName"></label>
          <input type="text" ng-model="selectedTask.title" />
          <input type="text" ng-model="selectedTask.description" />
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
        </div>
      </div>
    </div>
    <div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="addDialogLabel">Add Task</h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="control-group">
            <label class="control-label" for="inputTask">Task</label>
            <div class="controls">
              <input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;" />
              <br />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputDescription">Description</label>
            <div class="controls">
              <input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;" />
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      </div>
    </div>

    <div id="login" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
        <div class="modal-header">
            <h3 id="loginLabel">Sign In</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputUsername">Username</label>
                    <div class="controls">
                        <input data-bind="value: username" type="text" id="inputUsername" placeholder="Username">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input data-bind="value: password" type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button data-bind="click: login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Sign In</button>
        </div>
    </div>


    <script>
                    var app = angular.module('myApp', []);
                    app.controller('tasksCtrl', function($scope, $http) {
                                //$http.get("data.json")
                                $http.get("/todo/api/v1.0/tasks")
                                .success(function(response) {
                                    console.log(response.tasks)
                                    $scope.tasks = response.tasks;
                                });

                        $scope.editTask = function(task) {
                            $scope.selectedTask = task;
                        };
                        $scope.removeRow = function(task) {
                            $scope.tasks.splice(task, 1);
                        };
                        $scope.addNewTask = function() {
                            //$scope.tasks.push({title :$scope.task1,description: $scope.description1});
                            $scope.tasks.push({title: $scope.task1, description: $scope.description1});
                            $scope.task1 = '';
                            $scope.description1 = '';
                            //   $scope.tasks.push('dhsh');
                        };
                    });
                    /*
                     app.controller('addNewTaskCtrl', ['$scope', function($scope){
                     $scope.addNewTask=function(){
                     var task;
                     }
                     }]);*/

        </script>
  </body>

</html>