Angular 和 DevExtreme

Question

我正在使用 Angular DevExtreme 方法。

我只是想运行这段代码，但到目前为止，我还没有得到运行。

这是我的 HTML:

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

这是我的脚本：

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

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

var url = require('url');
//Require express, 
var express = require('express');
//and create an app
var app = express();

//app.get() which represents the HTTP GET method
app.get('/', function (req, res) {
    res.send('Hello World!');
});

//app.get() which represents the HTTP GET method param1/:param1/param2/:param2
app.get('/calc', function (req, res) {

    url_parts = url.parse(req.url, true);
    console.log(url);
    console.log(url_parts);
    a = parseInt(url_parts.query.param1);
    console.log(a);
    b = parseInt(url_parts.query.param2);
    console.log(b);

    output = a+b;
    console.log(output);
    res.writeHead(200, {
                   'Content-Type': 'text/html',
                   'Access-Control-Allow-Origin' : '*'});
    res.end(output + "\n");  
});

var server = app.listen(8000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://' + host + ':' + port);
});

我没有得到运行这个代码是怎么回事？有人可以帮助我吗？

谢谢罗德里戈

Answer 1

我已经按照描述更新了您的申请 here

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

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

希望对您有所帮助！

[更新]

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

Angular 和 DevExtreme

Angular and DevExtreme

angularjs

devextreme