Angular and DevExtreme
Im using Angular Approach for DevExtreme.
I'm just trying to run this code, but so far, I didn't get run.
This is my 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>
This is my script:
(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);
Also, I have a server in NodeJS as:
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);
});
Whats happening that I didnt get run this code? Can somebody help me?
Thanks Rodrigo
I've updated your application as described here
The main difference is use ng-view instead ng-controller in the index.html file. Also, there is small code refactoring.
You can download the simple project here - https://www.dropbox.com/s/ayc00jb0gg7xfdl/ng.zip?dl=0 and run it in your local web server.
Hope it helps!
[Upd]
This article describes step by step how to use DevExtreme widgets with the AngularJS framework.
链接地址: http://www.djcxy.com/p/31106.html下一篇: Angular和DevExtreme