Angular和DevExtreme
我使用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);
});
发生了什么，我没有得到运行此代码？ 有人能帮助我吗？
感谢罗德里戈
我已按照此处所述更新了您的应用程序
主要区别是在index.html文件中使用ng-view代替ng-controller 。 此外，还有小代码重构。
您可以在这里下载简单的项目 - https://www.dropbox.com/s/ayc00jb0gg7xfdl/ng.zip?dl=0并在您的本地Web服务器上运行它。
希望能帮助到你！
[UPD]
本文逐步介绍如何将DevExtreme小部件与AngularJS框架结合使用。
链接地址: http://www.djcxy.com/p/31105.html