个人中心
gpt4 book ai didi

Python Flask + AngularJS + DevExtreme

转载 作者：太空宇宙 更新时间：2023-11-03 16:13:09 26 4
gpt4 key购买 nike

首先，我对 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>

Controller .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 开发标签

<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 会崩溃。有什么办法可以让这两个人很好地合作吗？

最佳答案

DevExtreme supports AngularJS 1.2 - 1.4。您尝试使用太旧版本的 AngularJS。脚本在此 repo 3年前更新过。但您可以轻松使用另一个 angularjs 版本。您的 flask 布局如下所示:

<!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!");          
        }
    };
});

关于Python Flask + AngularJS + DevExtreme，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39091519/

26 4 0
文章推荐： ios - Paypal 始终以波兰语打开
文章推荐： paypal - WPS 中的 PayPal "amount"格式是什么？
文章推荐： ruby-on-rails - Ruby on Rails SaaS 免费计费管理
文章推荐： Python 二十一点计数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com