symfony2應用程序中的Angularjs

63

我覺得Symfony2可以完美地與AngularJS工作。證明是我使用Symfony在一邊製作了一個API，而在另一邊使用了AnglularJS製作了一個Web應用程序。

而且，因爲某些原因我產生我在我的Twig web應用程序的意見。每次我需要在我的視圖中使用Angular時，我只是在角色{% verbatim %} {% endverbatim %}聲明中嵌入角度的花括號。

2012-07-13 22:06:13

+9

你也可以改變angularjs的插值標籤爲您的應用程序 –

+0

@intrepion您是如何做出的指示與Symfony的的FormType領域如工作angularJS 。 CollectionType？我有一個問題http://stackoverflow.com/questions/38389740/customising-symfony2-collectiontype-form-field-display – utkarsh2k2

17

我面臨同樣的情況，在我的情況，我決定分家客戶端和服務器項目，我用Symfony2的服務器端，因爲它的簡單性和可用性除此之外給我帶來其他的優點。另一方面，我用AngularJS創建了一個簡單的HTML項目，這對我很有用，因爲我想創建一個具有相同客戶端文件的HTML5 Mobile App。

在這種情況下，我認爲問題的核心在於驗證和授權過程。您必須在服務器端實施安全防火牆以在REST中工作（例如WSSE：Symfony2: How to create a custom Authentication Provider）。

然後在客戶端（AngularJS），我發現最有用的資源的相應實現： Github:witoldsz/angular-http-auth。

如果你想與您的SF2的項目更深入地執行，則可以使用Assetic的過濾器編譯AngularJS，並獲得在頁面加載性能。

來源

2012-08-20 12:55:59

13

我用下面的代碼來改變AngularJS delmiters

的CoffeeScript：

# Change the angular delimiters for twig compatability 
# and load module with ngResource 
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) -> 
    $interpolateProvider.startSymbol "{[{" 
    $interpolateProvider.endSymbol "}]}" 
) var WAFapp2;

或Javascript：

var WAFapp2; 

WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) { 
    $interpolateProvider.startSymbol("{[{"); 
    return $interpolateProvider.endSymbol("}]}"); 
});

在我的佈局的頂部

則：

<!DOCTYPE html> 
<html lang="en" data-ng-app="WAFapp2"> 
    <head>

然後在html的body標籤部分後，我可以使用：

<ul> 
{% for item in seq %} 
    <li>{[{ item }]}</li> 
{% endfor %} 
</ul>

我想，這使事情變得更清潔，讓樹枝和角標籤容易混合。這似乎對我很好。

來源

2013-04-29 16:41:08 gcman105

27

截至枝條1。12原標籤更名爲verbatim：

{% verbatim %} 
    <ul> 
    {% for item in seq %} 
     <li>{{ item }}</li> 
    {% endfor %} 
    </ul> 
{% endverbatim %}

一切都在兩者之間不會被樹枝引擎進行解析，並可以通過AngularJS使用。

雖然我建議更改AngularJS分隔符。否則，在查看模板時，很難區分Twig和AngularJS代碼。

來源

2013-07-09 10:46:20 acme

11

兩個小鬍子避免混淆好的解決方案是基於屬性的指令稱爲NG綁定：<p ng-bind="yourText"></p>相同<p>{{yourText}}</p>

來源

2013-09-05 21:05:44 pabloRN

8

我一直在試圖建立使用Symfony和單頁應用angularjs。我使用Symfony2與FOSRestBundle構建了一個Restful API和Angularjs來構建前端。

AngularJs本身並不需要Symfony2框架來構建一個應用程序，只要它有一個可以與之通話的API。然而，我發現Symfony2在這些方面很有用：

模板中的翻譯。在大多數情況下，API有效內容中的數據不需要翻譯。對模板使用Symfony I18N支持非常有意義。
加載選項列表。假設您有一個擁有200多個選項的國家/地區列表。您可以構建一個API來填充angularjs中的動態下拉列表，但由於這些選項是靜態的，因此您可以簡單地在twig中構建該列表。
預加載數據/內容。如果您喜歡，您可以在託管頁面預先加載模板或JSON數據
利用Symfony的身份驗證功能。您也可以對應用程序的API使用相同的已驗證會話。不需要使用Oauth。
的Assetic束是urglyfy和AngularJs使用Javascript文件縮小束

不過，我也發現下面的挑戰是非常有用的：多

PHP會話鎖定Ajax調用。需要通過調用'session_write_close（）'或使用數據庫進行會話來釋放php會話的更好方法。 Symfony中最好的地方在哪裏調用'session_write_close'函數，以便我們儘可能快地釋放會話以獲得更多的Ajax調用？
重新加載/同步加載的數據假設您有一個瀏覽器中顯示的項目列表（如eBay項目），當您在服務器端更新列表時，您希望在客戶端瀏覽器中更新該列表。您可能需要定期輪詢列表或使用類似Firebase的內容。在大多數情況下，Firebase是一種矯枉過正的情況，投票對我而言並不好，但實現這一目標的最佳方式是什麼？

請加你評論。謝謝

來源

2013-10-01 06:45:00 DavidLin

+2

__對於你的第二個挑戰，'websocket'是要走的路.__我想到你已經發布了差不多兩年的時間，但是我想評論某人未來的參考。 – Lashae

11

保持角度的應用程序分離更明智。只需使用Symfony作爲數據檢索/持久性的api和安全提供程序。

這將允許更大的視圖和數據層的分離。因此，您可以在不考慮後端實現的情況下開始在前端工作。你只需要模擬api調用。

來源

2013-10-02 16:26:55 ken

+0

^- 這。通過與Twig混合，你正在使自己陷入混亂。如果你的API是正確的，那麼只要你認爲合適，你就可以挖掘並挖掘UI，而不用關心業務邏輯。因此，測試更容易。 – thinice

-2

你可以簡單地躲過大括號，如：

Hello {{ '{{' }} name {{ '}}' }}

，它會被解析到下一個HTML代碼：

Hello {{ name }}

您也可以嘗試使用左，右大括號HTML編碼字符集，例如：

&#123; name &#125;

但我不確定它會被Angular JS lib :)。

來源

2014-09-12 11:11:18

3

你可以使用這個template或者你可以學習這個模板，你可以基於它。

是一個模板應用程序，通過RestFul API與AngularJS的客戶端部分和Symfony2的服務器部分之間進行安全通信。

另一個project，你應該檢查是AISEL是開源CMS基於Symfony2的高負荷項目和AngularJS

來源

2015-02-23 14:00:45

0

通過網絡搜索，我遇到了不同的解決方案。例如，如前所述，您可以更改角度符號。不過，我更喜歡簡單地告訴樹枝輸出角符號，以保持它的最簡單越好：

{{ '{{entity.property}}' }}

http://louisracicot.com/blog/angularjs-and-symfony2/

來源

2015-10-30 13:12:59

0

使用{@ variable @}模板。生成模板後，將{@替換爲{{和@}，用}}替換爲簡單的str_replace函數。這種方式乾淨而且快速，然後字符串連接等等。

來源

2015-11-16 12:48:24

2

從理論上講，你只能從symfony渲染你的索引頁面，所以你根本不必使用樹枝。你只需要渲染第一頁，然後角框架接管。 Angularjs有它自己的模板語法和功能。我不認爲有必要混合這兩個，因爲你可以完全分離這兩個框架。也許，讓你的服務器在yourdomain.com上使用文件index.html（你的角度應用）作出響應，和symfony的所有內容都來自/ api前綴，或類似的東西。試想一下，您的WebApi項目是另一個服務器和angularjs項目。他們只會通過API呼叫進行通話，根本不需要混合模板。

來源

2016-07-07 23:23:29

3

我一直在面對很多問題，我自己試圖讓Symfony和AngularJS一起工作。但是同時它的工作我學到了一些東西可以幫助你：從枝杈花括號

爲了區分AngularJS表達式{{ variable }}你有三個選擇：

一）。使用AngularJS表達式的引號{{ '{{ variable }}' }}

b）。將您的AngularJS代碼圍繞着{% verbatim %} your code {% endverbatim %}

c）。使用AngularJS interpolateProvider服務

angular.module('myApp', []).config(function($interpolateProvider){ 
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); 
});

在js文件，樹枝無法爲您生成的URL。爲此，您可以使用「friendsofsymfony/jsrouting-bundle」。安裝完成後，你可以使用它： $http.get(Routing.generate('route_name', {'id':id}));

這可能不適合你提交，爲什麼？關於$ http.post，你應該知道的一件事是，它不會將數據作爲「表單數據」發送，而是作爲「請求有效載荷」發送，這是通過HTTP POST傳輸數據的正常方式。問題在於，這種「正常的方式」不等同於表單提交，這會導致用Symfony Request對象解釋數據時出現問題。

使用這個代替：

$http.put(url, $.param({foo: 'bar'}), { 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
});

當你想知道如果請求是控制器內的AJAX請求，我們通常使用的isXMLHttpRequest（）方法。問題在於Angular不會將其請求標識爲XMLHttpRequest請求。使用此：

var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);

在創建表格，你可以選擇通過AngularJS顯示形式，讓Symfony的形式來處理請求。對於您需要禁用CSRF保護：

public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }

現在的symfony表格可從自定義角請求接收數據。

除了所有的事情，我仍然不確定一件事，是否使用Symfony或AngularJS來顯示您的表單。

希望這會有所幫助。

來源

2016-07-15 08:12:45 utkarsh2k2

0

我碰到過在Symfony2上使用AngularJS開發單頁應用程序的情況。

如果你可以分開兩個應用程序，完美！它會創建模型和視圖圖層的很好分離。如果不是，就像我的應用程序一樣，你可以肯定地使用AngularJS和Symfony2以及TWIG。

我用引號將AngularJS這樣的表達式 -

{{ '{{someAngularJsExpression}}' }}

它只是需要一些時間來習慣它，但是當你這樣做，你就不會面臨許多問題。 Symfony還允許您使用其他模板引擎，但我不想。

所以我的建議是要麼爲AngularJS和Symfony有兩個不同的應用程序。如果你沒有這樣的資源，你可以按照我的方式做。不要擔心，你會習慣的。

來源

2018-01-24 18:54:59

0

今天大家都希望symfony後端帶有api和angular/vue前端 - 這很好，但是這樣我們就失去了所有前端的symfony能力。

我成功使用角度與我的symfony應用程序。也許這不是高性能的東西，但它的工作原理。

一些建議給你：

瞭解$ interpolateProvider

angular.module('myApp', [], function($interpolateProvider) { 
      $interpolateProvider.startSymbol('{[{'); 
      $interpolateProvider.endSymbol('}]}'); 
    });

這樣你就可以改變{{}}在角別的東西。我使用的是{[{和}]}，所以它不會有樹枝幹擾

這裏第二個最好的辦法是 https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

此連接的symfony與JS路由，因此所有角度的看法在JS /或Ajax調用可以通過symfony的生成 - 這給你一個巨大的可能性

來源

2018-01-25 09:52:08

symfony2應用程序中的Angularjs

回答

相關問題