Using Angular in OOP

Question

I'm currently trying out how to implement angular in OOP. My testsite looks like this:

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

?>

The code sections which are the most important are those:

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";
    })

  }
}

and

    <div ng-app="xMyApp" ng-controller="xMyCtrl">
            {{data1 + " " + data2}}
          </div>

So, when I'm running the site, using OOP the div associated with angular first displays the whole angular expression string {{data1 + " " + data2}} and then immediately switches to the resolved results after the page has completely loaded (see the onload functions inside the bodytag).

When I'm not using OOP, this cosmetical issue vanishes. First I thought I could solve this issue by simply calling the xMyApp() method from inside the script, which looks like this:

[full scriptcode]
angularAppsInstance.xMyApp()

I thought this would help because it would be similar to non-OOP, where any functionality not specifically excluded from onloadexecution is executed ASAP. But actually, it doesn't change anything.

So, is there any elegant way to solve this issue without dropping the OOP-approach entirely? Or is it a "bad" idea to use angular inside OOP code anyway? I've never used angular before, so I would be glad if someone could give me a tip.

EDIT: If you want to try out yourself how the OOP/non-OOP approach differ, simply comment out:

var angularAppsInstance =  new angularApps(sendDataInstance, userDataInstance);

and

angularAppsInstance.xMyApp()

and comment in this part:

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

Hi, the stacksnippet neither support angular nor support php. try to use codeblocks instead. The { } icon in the editor toolbar — Sagar V
– Sagar V, Commented Aug 10, 2018 at 8:34
I don't fully grasp your problem, or what you want to do yet. But is Anuglar 2+ an option? Since it seems like that would suit your style of coding a bit better. — Agash Thamo.
– Agash Thamo., Commented Aug 10, 2018 at 8:37
the problem is that the non-OOP approach rendered better results than the OOP approach. In the non-OOP approach, the results from the angular code are displayed immediately. In the OOP approach, you see the original expression-string for a few milliseconds and then it turns into the result. I would like to know if this cosmetical issue can be solved elegantly. — ForeFather321
– ForeFather321, Commented Aug 10, 2018 at 8:42
Why do you keep repeating the word OOP as if it would have to do anything with your problem? You probably just did something right before that you do wrong now. Can you show the code where it worked? — xate
– xate, Commented Aug 10, 2018 at 8:46
@Xatenev Look at my edit, if you want to compare the results of these two approaches, just do as I said in my EDIT. — ForeFather321
– ForeFather321, Commented Aug 10, 2018 at 9:09

CatStrategist · Accepted Answer · 2018-08-10 09:17:18Z

2

It probably doesn't have anything to do with your style of coding. AngularJS displays moustaches if it haven't finished loading. To prevent it use ng-cloak directive.

Add this to your styles:

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

And for now add ng-cloak directive to your body and then go read about it on docs!

<body ng-cloak>

</body>

edited Aug 10, 2018 at 9:17

answered Aug 10, 2018 at 9:09

CatStrategist

706 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angular in OOP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related