Fatal编程技术网
  • javascript/
  • Javascript 在面向对象编程中使用Angular

Javascript 在面向对象编程中使用Angular

javascript php html angularjs

Javascript 在面向对象编程中使用Angular,javascript,php,html,angularjs,Javascript,Php,Html,Angularjs,我目前正在尝试如何在OOP中实现angular。 我的测试站点如下所示： class userData { catchDropDownSelection(){ this.dropDownSelection = $('#xDropDown option:selected').text(); console.log("dropDownSelection is ", this.dropDownSelection) } } class sendData

我目前正在尝试如何在OOP中实现angular。 我的测试站点如下所示：

class userData {

    catchDropDownSelection(){
        this.dropDownSelection = $('#xDropDown option:selected').text();
        console.log("dropDownSelection is ", this.dropDownSelection)
    }
}

class sendData{
    constructor(userData){
        this.userDataClone = userData;

    }

    sendDropDownSelection(){
        //this.userDataClone.catchDropDownSelection();
        console.log("this.userDataClone.dropDownSelection inside sendDropDownSelection is ", this.userDataClone.dropDownSelection)
        $.post("MyFirstPhP.php", {
            userSelection : this.userDataClone.dropDownSelection
        }, function (data){
            //this.testFunction()
            $('#testOutput').html(data);
            //document.getElementById("testOutput").innerHTML = "data"
        }).fail(function(){
            console.log("$.post failed!");
        })
    }

    testFunction(){
        //document.getElementById("testOutput").innerHTML = "data"
        $('#testOutput').html("data");
    }
}

class angularApps {
  constructor(sendData, userData){
    this.sendDataClone = sendData;
    this.userDataClone = userData;
  }

  xMyApp(){
    this.myApp = angular.module('xMyApp', []);
    this.myApp.controller("xMyCtrl", function($scope){
      $scope.data1 = "test1";
      $scope.data2 = "test2";
    })

  }
}

class setEvents {

  constructor(sendData, userData){
    this.sendDataClone = sendData;
    this.userDataClone = userData;
  }

  onClickEvents(){
    $('#sendDataButton').click(function(){
      this.userDataClone.catchDropDownSelection()
      //console.log("index catched is ", this.sendDataClone.userDataClone.dropDownSelection)
    }.bind(this))
    $('#sendDataButton').click(function(){
      this.sendDataClone.sendDropDownSelection()
    }.bind(this))
  }

  addAllEvents(){
    this.onClickEvents()
  }
}

var userDataInstance = new userData;
var sendDataInstance = new sendData(userDataInstance);
var angularAppsInstance =  new angularApps(sendDataInstance, userDataInstance);
var setEventsInstance = new setEvents(sendDataInstance, userDataInstance);

/*y
var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
  $scope.data1 = "test1";
  $scope.data2 = "test2";
})*/

<!DOCTYPE html>
<html>
    <head>
        <title>PHP is Awesome!</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "MyFirstPhP.css">
    </head>
        <body onload="setEventsInstance.addAllEvents(); angularAppsInstance.xMyApp()">
          <div ng-app="xMyApp" ng-controller="xMyCtrl">
            {{data1 + " " + data2}}
          </div>
          <div id = "fancyBackGround">

              <select id = "xDropDown">
                  <option value = "test1">test1</option>
                  <option value = "test2">test2</option>
              </select>



            <button id="sendDataButton">ClickMe!</button>

            <p id = "testOutput">not yet</p>

          </div>





            <script src="MyFirstPhP.js"></script>
        </body>
</html>

<?php
session_start();
$dropDownSelection = $_POST['userSelection'];
echo $dropDownSelection
//$dropDownSelection = $dropDownSelection . "wurde verarbeitet!";

?>

[full scriptcode]
angularAppsInstance.xMyApp()
及

我认为这会有所帮助，因为它类似于非OOP，在非OOP中，任何未明确排除在onloadexecution之外的功能都会尽快执行。 但事实上，这并没有改变任何事情

那么，有没有什么优雅的方法可以在不完全放弃OOP方法的情况下解决这个问题呢？还是说在OOP代码中使用angular是个“坏”主意？ 我以前从未使用过angular，所以如果有人能给我小费，我会很高兴

编辑：如果您想自己尝试OOP/非OOP方法的不同之处，只需注释：

var angularAppsInstance =  new angularApps(sendDataInstance, userDataInstance);
及

并在这一部分作出评论：

var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})
这可能与您的编码风格无关。如果AngularJS尚未完成加载，它将显示小胡子。要防止它，请使用ng斗篷指令

将此添加到您的样式中：

<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-    ng-cloak    {
    display: none !important;
} 
</style>


[ng \：斗篷]，[ng斗篷]，[data ng斗篷]，[x-ng-斗篷]，.ng斗篷，.x-ng斗篷{
显示：无！重要；
}
现在把ng斗篷指令添加到你们的身体里，然后在文档上读一下

<body ng-cloak>

</body>
Hi，stacksnippet既不支持angular，也不支持php。尝试改用代码块。编辑器工具栏中的
{}
图标我还没有完全理解您的问题，或者您想做什么。但是Anuglar 2+是一种选择吗？因为这似乎更适合您的编码风格。问题是，非面向对象方法比面向对象方法提供了更好的结果。在非面向对象方法中，角度代码的结果会立即显示。在OOP方法中，您会在几毫秒内看到原始表达式字符串，然后将其转换为结果。我想知道这个美容问题是否可以优雅地解决。为什么你总是重复这个词
OOP
，好像这与你的问题有关？你以前可能做对了，现在你做错了。你能把代码显示在哪里吗？@Xatenev看看我的编辑，如果你想比较这两种方法的结果，就按照我在编辑中说的做。 
var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})

<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-    ng-cloak    {
    display: none !important;
} 
</style>

<body ng-cloak>

</body>