Python Flask + AngularJS + DevExtreme

처음에는 자바 스크립트에 처음 익숙해졌지만 파이썬에 관한 나의 길을 알고 있습니다. 나는 자바 스크립트를 배우려고 노력하고 있으며 이것을 시도하면서 내 리그에서 빠져 나올 수도 있지만 그것이 올바른 방법을 배우는 방법입니다.Python Flask + AngularJS + DevExtreme

두 번째로 Flask와 AngularJS는 약간의 도움으로 잘 작동합니다. 감사합니다 shea256 (https://github.com/shea256/angular-flask)

이제 '테스트 응용 프로그램'을 설치하고 쉽게 실행할 수 있습니다.

그러나이 스택에 DevExtreme을 추가하려고하는데 몇 가지 문제가 있습니다. 여기

내가 무엇을 가지고 :

index.html을

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

이와

'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); 
    }]) 
;

을 app.js

<!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, 내가 탐색 할 때 로컬 호스트 : 5000, t ? 그의 에러

https://docs.angularjs.org/error/ $ 주입기/modulerr P0 = AngularFlask & P1 = % 5B $ 인젝터보고 %의 5D의 %의 20http unpr % 2F % 2Ferrors.angularjs.org % 2F1.5.7 % 2F $으로 인젝터 % 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%[email protected] : % 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 % 2F libs % 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%[email protected] : % 2F % 2Fajax.googleapis.com % 2Fajax % 2Flibs % 2Fjquery % 2F1.12.4 % 2Fjquery.min.js : 2 : 27444%0An.Callbacks%[email protected] : % 2F % 2Fajax.googleapis.com % 2Fajax % 2Flibs % 2Fjquery % 2F1.12.4 % 2Fjquery.min.js : 2 : 28213%[email protected] : % 2F % 2Fajax.googleapis.com % 2Fajax % 2Flibs % 2Fjquery % 2 F1.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 20 % 각형 .mins : 20 % 각형 .min. js : 20 % 각형 .mins : 20 % 각형 .mins : 20 % 각형. .min.js : 43Bc % 2Fc() % 20angular.min.js : 20Bc() % 20angular.min.js : 21ge() % 20angular.min.js : 19 % 3Canonymous % 3E % 20angular.min.js : 315n . 콜백 % 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을 사용하는 경우 언급 할 가치가 있습니다.

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의 일부 기능이 누락되었음을 알려줍니다 : 7 내 HTML dev에 태그를 추가 할 때까지 문제가 해결되었는지 (각도-플라스크에 포함)

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

는 이러한 오류입니다 AngularJS 1.0.7; 그러나 AngularJS 1.2.X Angular-Flask를 사용하는 경우. 이 두 사람이 잘 어울리게하기 위해 어쨌든 있습니까?

출처

2016-08-23 txDMTN

DevExtreme supports AngularJS 1.2 - 1.4. 너무 오래된 버전의 AngularJS를 사용해보십시오. 이 repo의 스크립트는 3 년 전에 업데이트되었습니다. 그러나 다른 각도 버전을 쉽게 사용할 수 있습니다. 귀하의 플라스크 레이아웃은 다음과 같이 할 수 있습니다

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

출처

2016-08-23 08:15:46 Sergey

! 나는 대답에 추가 단계를 추가 할 것이다. 그러나 이것이 중간에있는 것보다 더 많은 것을 얻었 기 때문에 대답으로 받아 들일 것입니다. – txDMTN

Python Flask + AngularJS + DevExtreme

답변

관련 문제