Angular и DevExtreme

Я использую угловой подход для 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);
});

Что случилось, что я не запустил этот код? Кто-нибудь может мне помочь?

Спасибо родриго

Источник

1 ответ

Решение

Я обновил ваше приложение, как описано здесь

Основным отличием является использование ng-view вместо ng-controller в index.html файл. Также есть небольшой рефакторинг кода.

Вы можете скачать простой проект здесь - https://www.dropbox.com/s/ayc00jb0gg7xfdl/ng.zip?dl=0 и запустить его на локальном веб-сервере.

Надеюсь, поможет!

[Обно]

В этой статье шаг за шагом описывается, как использовать виджеты DevExtreme с инфраструктурой AngularJS.

Источник
Другие вопросы по тегам