Question

我正在使用Angular Approach for DevExtreme。

我只是试图运行此代码，但到目前为止，我还没有运行。

这是我的HTML：

if (grades[i].HasValue )
{  
    // mean grades[i] is not null and has some int value inside it
}

这是我的剧本：

<!doctype html>
<html ng-app="myCalc">

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/libs/angular.js/angular.js" type="text/javascript"></script>
    <script src="js/libs/angular.js/angular-sanitize.js" type="text/javascript"></script>
    <script src="js/libs/angular.js/angular-resource.js" type="text/javascript"></script>

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


    <script src="js/libs/angular.js/dx.webapp.js" type="text/javascript"></script>  
    <script src="script.js" type="text/javascript"></script>            
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.3/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.3/css/dx.light.css" />

    <script src="js/libs/angular.js/dx.all.js" type="text/javascript"></script>




</head>
<body ng-controller="AppCtrl" >

    <form>
        <br>
        <br>            
            Parameter 1: 
        <input type="text" ng-model="param1">
        <br>
        <br>
            Parameter 2: 
        <input type="text" ng-model="param2">
    </form>
    <br>
    <br>


 <div dx-button="{
        text: 'Sample GET',
        clickAction: click()
    }"></div>



     <br>
     <div>Sum: {{data}}</div>
     <br>
</body>

另外，我在NodeJS中有一个服务器：

(function(angular) {
'use strict';
angular.module('myCalc', [ 'dx' ] )
angular.module('myCalc', ['ngRoute'])


    .controller('AppCtrl', function($scope, $http, $templateCache) {
        $scope.click = function(url) {
          $scope.url = url;

            $http.get($scope.url, {
                params: {
                    param1: $scope.param1,
                    param2: $scope.param2

            },
            cache: $templateCache
        }).
        success(function(data) {
            $scope.data = data;
        }).
        error(function(data) {
            $scope.data = data || "Request failed";
        });
      }; 
 })


.config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('http://localhost:8000/calc', {
      templateUrl: 'index.html',
      controller: 'AppCtrl'
    });
  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

})(window.angular);

发生了什么事，我没有运行此代码？有人可以帮帮我吗？

由于罗德里戈

Answer 1

我按照here

所述更新了您的申请

主要区别在于ng-view文件中使用ng-controller代替index.html。此外，还有一些小代码重构。

您可以在此处下载简单项目 - https://www.dropbox.com/s/ayc00jb0gg7xfdl/ng.zip?dl=0并在本地网络服务器中运行。

希望它有所帮助！

<强> [UPD]

这个article一步一步地描述了如何将DevExtreme小部件与AngularJS框架一起使用。

Angular和DevExtreme

1 个答案: