文章/答案/技术大牛

发布

社区首页 >问答首页 >Python Flask + AngularJS + DevExtreme

问Python Flask + AngularJS + DevExtreme
EN

Stack Overflow用户

提问于 2016-08-23 10:44:06

回答 1查看 779关注 0票数 1

首先，我是javascript的新手，但我熟悉python。我正在尝试学习javascript，我可能不适合尝试这个，但这就是你正确学习的方式。

其次，Flask和AngularJS在一点帮助下就能很好地合作。特别感谢shea256 (https://github.com/shea256/angular-flask)

现在，我可以相当容易地启动和运行“测试应用程序”了。

但是，我想将DevExtreme添加到这个堆栈中，但我遇到了一些问题。

这就是我所拥有的：

index.html

    <!doctype html>
<html lang="en" ng-app="AngularFlask">
<head>
    <meta charset="utf-8">
    <title>AngularFlask</title>

    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />

    <!--<script src="/static/lib/jquery/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!--2.7.0-->
    <!--<script src="/static/lib/angular/angular.js"></script>
    <script src="/static/lib/angular/angular-resource.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.min.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>


    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    -->
    <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.web.js"></script>



    <script src="/static/js/app.js"></script>
    <script src="/static/js/controllers.js"></script>
    <script src="/static/js/services.js"></script>


    <script src="/static/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body>
    <div id="header" class="header navbar navbar-static-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                </button>
                <a class="brand" href="/">AngularFlask</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li class="">
                            <a href="/">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container page">
        <div id="content" class="container main" ng-view>
        </div>

        <hr>
        <footer id="footer" class="footer">
            <div class="footer-left">
                <a href="/about">About</a> |
                <a href="/">Home</a>
            </div>
            <div class="footer-right">
                <span>&copy; 2013 AngularFlask</span>
            </div>
        </footer>
    </div>
</body>
</html>

controllers.js

function IndexController($scope) {

}

function AboutController($scope) {

}

function PostListController($scope, Post) {
    var postsQuery = Post.get({}, function(posts) {
        $scope.posts = posts.objects;
    });
}

function PostDetailController($scope, $routeParams, Post) {
    var postQuery = Post.get({ postId: $routeParams.postId }, function(post) {
        $scope.post = post;
    });
}

app.js

'use strict';

angular.module('AngularFlask', ['angularFlaskServices', 'dx'])
    .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'static/partials/landing.html',
            controller: IndexController
        })
        .when('/about', {
            templateUrl: 'static/partials/about.html',
            controller: AboutController
        })
        .when('/post', {
            templateUrl: 'static/partials/post-list.html',
            controller: PostListController
        })
        .when('/post/:postId', {
            templateUrl: '/static/partials/post-detail.html',
            controller: PostDetailController
        })
        /* Create a "/blog" route that takes the user to the same place as "/post" */
        .when('/blog', {
            templateUrl: 'static/partials/post-list.html',
            controller: PostListController
        })
        .otherwise({
            redirectTo: '/'
        })
        ;

        $locationProvider.html5Mode(true);
    }])
;

因此，当我导航到localhost:5000时，报告了这个错误

https://docs.angularjs.org/error/$injector/modulerr?p0=AngularFlask&p1=%5B$injector:unpr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.5.7%2F$injector%2Funpr%3Fp0%3D%2524routeProvider%0AO%2F%3C@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:6:412%0Adb%2Fn.$injector%3C@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:43:84%0Ad@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:40:344%0Ae@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:41:78%0Ah%2F%3C.invoke@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:41:163%0Ad@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:313%0Ag%2F%3C@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:445%0Ar@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:7:353%0Ag@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:222%0Adb@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:43:246%0ABc%2Fc@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:20:359%0ABc@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:21:163%0Age@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:19:484%0A@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:315:135%0An.Callbacks%2Fi@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:27444%0An.Callbacks%2Fj.fireWith@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:28213%0A.ready@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:30004%0AK@https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:30366%0AO%2F%3C()%20angular.min.js:6g%2F%3C()%20angular.min.js:40r()%20angular.min.js:7g()%20angular.min.js:39db()%20angular.min.js:43Bc%2Fc()%20angular.min.js:20Bc()%20angular.min.js:21ge()%20angular.min.js:19%3Canonymous%3E%20angular.min.js:315n.Callbacks%2Fi()%20jquery.min.js:2n.Callbacks%2Fj.fireWith()%20jquery.min.js:2.ready()%20jquery.min.js:2K()%20jquery.min.js:21%20angular.min.js:6:412

值得一提的是，如果我使用AngularJS 1.0.7 (包含在Angular-Flask中)，这个问题就会解决，直到我添加我的html dev标签

<div dx-button="{
    text: 'Generate random value'
}"></div>

然后是以下错误：

Error: e.$$postDigest is not a function
Error: t.$root is undefined
Error: a.$watch is not a function
Error: c.$watch is not a function
Error: a.$watch is not a function
Error: t.dxTemplateModel is undefined

所以这告诉我DevExpress在AngularJS 1.0.7中缺少一些函数；然而，当使用AngularJS 1.2.X时，Angular-Flask会中断。有没有办法让这两个人在一起玩得很好？

python

angularjs

flask

devexpress

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-23 16:15:47

DevExtreme supports AngularJS 1.2 - 1.4。您尝试使用的AngularJS版本太旧。此repo中的脚本在3年前更新。但是您可以很容易地使用另一个angularjs版本。您的烧瓶布局如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Flask Application</title>
    <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />
</head>
<body class="dx-theme-generic-typography" ng-app="myApp">

    <div ng-controller="defaultCtrl">
        <div dx-button="buttonOptions"></div>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-sanitize.js"></script>
    <script src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.all.js"></script>
    <script src="/static/scripts/application.js"></script>
</body>
</html>

和/static/scripts/application.js文件：

var myApp = angular.module("myApp", ["dx"]);

myApp.controller("defaultCtrl", function($scope) {
    $scope.buttonOptions = {
        text: "My button",
        onClick: function(){
            alert("Hi!");          
        }
    };
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39091519

复制

相似问题

问Python Flask + AngularJS + DevExtreme
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Python Flask + AngularJS + DevExtremeEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Python Flask + AngularJS + DevExtreme
EN