Python Flask + AngularJS + DevExtreme

まず、私はjavascriptにはかなり新しいですが、私は自分の道を知っています。私はjavascriptを学ぼうとしているし、これを試して自分のリーグから外れているかもしれませんが、それはあなたが正しいことを学ぶ方法です。Python Flask + AngularJS + DevExtreme

第2に、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; 
    }); 
}

は、これにより

'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ローカルホスト：5000、t ？UNPR％の5Dの％の20http：％2F％2Ferrors.angularjs.org％2F1.5.7％2F $インジェクタ％2Funpr％彼のエラーが

https://docs.angularjs.org/error/ $インジェクター/ modulerr P0 = AngularFlask & P1 =％5B $インジェクタが報告されています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 ％20C（％）20°分（％）20°分（％）20°分。分：20％％20angular.min.js：21％（）％20angular.min.js：19％3Canonymous％3E％20angular.min.js：315n ％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を使用する場合は、ブレークします。これらの2人を一緒にうまくプレイさせるにはどうしてですか？

出典

2016-08-23 txDMTN

DevExtreme supports AngularJS 1.2 - 1.4。古いバージョンのAngularJSを使用しようとしています。このrepoのスクリプトは3年前に更新されました。しかし、あなたは別のanglejsバージョンを簡単に使うことができます。あなたのフラスコのレイアウトは以下のようになります。

<!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

答えて

関連する問題