Question

我有一个用于提供json搜索结果的烧瓶路线search和一个用于搜索的页面的index，简化为

@app.route('/search')
def search():
    res = querydb(request.args)
    return jsonify(res)


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

在index.html中，我有一个链接到角度变量的搜索表单，以及一个使用角度/search和搜索表单中的url参数查询$http的按钮。

我希望能够根据网址额外获取初始结果（例如，让网址/index?color=red加载/index页面并在加载时从/search?color=red获取结果。

要做到这一点，我将jinja模板标签重新定义为<%blah%>（不干扰角度），并使用render_template('index.html', color='red')呈现页面，并在html中使用一个代码段

<div ng-controller="MainCtrl" ng-init="fetch('<%color%>')"> </div>

必须有更好的方法将params从烧瓶发送到角度（尝试$routeParams或$location.search()似乎不适用于烧瓶，返回空对象）。或者我应该以某种方式以不同的方式撰写观点？

Answer 1

您应该处理来自angular的页面路径和来自flask的API端点。所以你的烧瓶文件可能如下所示：

@app.route('/api/search')
def search():
    res = querydb(request.args)
    return jsonify(res)


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

Angular App

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

app.config(function($routeProvider) {
    $routeProvider
            .when('/index', {
                templateUrl: 'mainView.html'
                controller: 'MainCtrl'
            });
});

<强>控制器

var MainCtrl = function($location, $http, $scope) {
    //Now you can access the search params
    var searchParams = $location.search();

    $http.get('/api/search?color=' + searchParams.color).success(function(data) {
        $scope.results = data;
    });
}

现在，如果你转到http://somedomain/#/index?color=red，它应该获取初始结果。请注意，Angular在/#之后处理了网址的一部分。此外，您还需要包含angular-route.js文件才能使路由工作在角色中。

当您使用角度路由时，index.html文件将包含您希望包含在每个视图中的所有样板内容，并且页面的布局将进入mainView.html。 index.html需要在身体某处<div ng-view></div>告诉角度注入的位置mainView.html

将url params从烧瓶传递到角

1 个答案: