All geek questions in one place

Angularjs: server side (php) and client side data binding after event

The backend provides a fully rendering site, and in the frontend I want angularjs to handle dynamic content using the ajax-call / data binding, but if you deliver the ng-bind directive, then angularjs binds them directly to their initial value, which is NULL before any user action.

I found a hacker solution, but I wanted to know if there is a better or maybe another js framework that does exactly what I'm trying to do:

https://github.com/herschel666/angular-lazy-bind

The following example should help to understand my problem ... as soon as js loads, the actual value "server side hola" (server side delivered) is gone. I want the innerhtml / value to remain the same and keep the binding active, but lazy, so that it would only change it after the action, it is important that angularjs does not overwrite which server side has already been written (fixed)

<html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body > <div ng-controller="GreetingController"> <!-- this value has to stay ... but keep its binding property in order to change it afer an user action --> <span ng-bind="greeting"> hola server side</span> <button ng-click="update()">update</button> </div> </body> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.update = function (){ //do ajax calls and set greeting and other data to bind $scope.greeting = 'Hola!'; } }]); </script> </html>
+5
source share
2 answers

isomorphism

I wanted to know if there is a better or maybe another js framework that does exactly what I'm trying to do

You are trying to create an isomorphic application. React will allow you to create isomorphic applications, but it is usually required that the backend be built in node.js. There is a way to use Reaction with PHP . There are other solutions and isomorphism.

bindings

it is important that angularjs does not rewrite which server side is already written (fixed)

You can pass angular server data by passing it in HTML with a script tag using the PHP json_encode function. This way angular will have the correct data at startup.

  <script> angular.module('app').constant('applicationData', <?= json_encode(application_data) ?>); </script>

Then you can enter applicationData and use it to initialize your directive. This approach is not ideal because it forces you to deal with the same data twice. Therefore, using a view library like React, which was built to support isomorphism, is probably the best choice when creating an isomorphic application.

+8
source

Text: the hola server inside the tag is useless because it is replaced with Angular with the contents of the greeting. The content of the ist greeting is empty at the beginning of the application.

Initialized greeting in javascript

 var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = "greeting initialized"; $scope.update = function (){ //do ajax calls and set greeting and other data to bind $scope.greeting = 'Hola!'; } }]);

full example http://jsfiddle.net/ud6z4krk/5/

or

Initialize HTML greeting with ng-init

 <div ng-app="myApp"> <div ng-controller="GreetingController"> <span ng-init="greeting = 'hola server side'" ng-bind="greeting"></span> <button ng-click="update()">update</button> </div> </div>

full example http://jsfiddle.net/ud6z4krk/8/

Or you create a new attribute directive for your refresh button. In the parameters of the directive, you can refer to your content tag. The directive adds an event to the refresh button to receive new data from the server and update the contents of the link tag.

+1
source

Source: https://habr.com/ru/post/1209318/

More articles:


All Articles