Angularjs:服务器端(PHP)的渲染和数据的事件后,结合客户端服务器端、客户端、事件、数据

2023-09-13 03:05:28 作者:别急我来送纸

在后端提供了一个完全渲染现场和前端我要为angularjs处理通过Ajax的呼叫/数据绑定的动态内容,但如果你传递指令NG绑定,然后angularjs直接绑定他们这是他们的初始值NULL用户的任何行动之前。

我找到了一个解决方案,哈克,但我想知道是否有一个更好的或者其他的js框架,不正是我想要做的:

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

下面的例子应该有助于理解我的问题...一旦JS加载inital值HOLA服务器端(送到服务器端)已经一去不复返了。我想要的innerHTML /值保持这样的,保持绑定活跃,但懒惰,以便它只是一个动作后更改重要的一点是angularjs不重写哪些服务器端已经writen(redered)

 &LT; HTML NG-应用=对myApp&GT;&LT; HEAD&GT;&LT;间的charset =UTF-8&GT;&LT;标题&gt;将文档和LT的称号; /标题&GT;&LT; /头&GT;&LT;身体GT;&LT; D​​IV NG控制器=GreetingController&GT;  &LT;! - 这个值已经留...但​​保留其结合特性,以改变它的AFER用户动作 - &GT;  &LT;跨度NG绑定=问候&GT; HOLA服务器端&LT; / SPAN&GT;  &LT;按钮NG点击=更新()&GT;更新&LT; /按钮&GT;&LT; / DIV&GT;&LT; /身体GT;&LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js\"></script>&LT;脚本类型=文/ JavaScript的&GT;    VAR对myApp = angular.module('对myApp',[]);myApp.controller('GreetingController',['$范围',函数($范围){  $ scope.update =功能(){    //做Ajax调用和设置的问候和其他数据绑定    $ scope.greeting ='霍拉!;  }}]);&LT; / SCRIPT&GT;&LT; / HTML&GT; 

解决方案

同构

  

的我想知道是否有一个更好的或者其他的js框架,不正是我想要做的的

JavaScript 40 基本的Web开发工具

您正在试图建立一个 同构的应用程序。 阵营将允许您创建同构的应用程序,但通常需要后端建在node.js中有方式的使用 用PHP 。还有其他解决方案以同构以及。

结合

  

的重要的是为angularjs不重写哪些服务器端已经writen(redered)的

您可以用剧本标记传递给它的HTML,使用 json_en code PHP函数。启动时通过这种方式角度都会有正确的数据。

 &LT;脚本&GT;  。angular.module(应用)常数('的ApplicationData',&LT;?= json_en code(application_data)来&GT;); &LT; / SCRIPT&GT; 

然后你可以注入的ApplicationData 并使用它来初始化指令。这种方法是不理想的,因为它迫使你处理相同的数据的两倍。这就是为什么使用等反应这是建来支持同构创建一个同构应用程序时可能是一个更好的选择视图库。

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

I found a hacky solution but I wanted to know if there is a better one 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... once js is loaded the inital value "hola server side"(server side delivered) is gone. I want for the innerhtml/value to stay like that and keep the binding active but lazy so that it would only change it after an action the important thing is for angularjs to not rewrite what server side has already been writen(redered)

<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>

解决方案

isomorphism

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

You are trying to build an isomorphic application. React will allow you to create isomorphic applications, but normally requires the backend be built in node.js. There is a way to use React with PHP. There are other solutions to isomorphism as well.

binding

the important thing is for angularjs to not rewrite what server side has already been writen(redered)

You can feed angular the server-side data by passing it in the HTML with a script tag, using the json_encode PHP function. This way angular will have the correct data when it starts up.

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

Then you can inject applicationData and use it to initialize your directive. This approach is less than ideal because it forces you to deal with the same data twice. That's why using a view library like React which was built to support isomorphism is probably a better choice when creating an isomorphic application.