将Angularjs 2项目集成到现有的Symfony 2项目中

Question

我们希望摆脱一个旧的Flex项目，将其重建为HTML5。因此，我们正在使用Angularjs2构建一个概念验证，并希望将服务集成到现有的PHP Symfony 2后端中。但由于Angular在本地主机上的nodejs上运行“开箱即用”，并且Symfony2项目在localhost：8888上运行，因此我遇到了会话问题。每次调用时从localhost：3000发送的请求都会得到不同的PHPSESSID回复，而服务器无法记住用户。

解决这个问题的最佳方法是什么？

我能否从localhost：8888运行Angularjs项目？如果我尝试，它会抱怨它没有从localhost：3000运行。

- Olivier de Jonge

---

你确定 Angular 需要 Node.js 吗？据我所知，它只是一个简单的前端框架。只需要 Angular 库即可。 - D.Dimitrioglo

我认为它可以在任何服务器上运行，毕竟它是JavaScript。但是到目前为止，我做过的所有教程都使用node.js，并使用模拟请求。 - Olivier de Jonge

我认为你可以使用Symfony2框架作为API从数据库中获取数据等。在你的情况下，你已经构建了一个后端，没有理由使用nodeJs。 - D.Dimitrioglo

我尝试过了，但是我收到了一个JS错误，告诉我它想从localhost:3000运行。 - Olivier de Jonge

我会补充一些步骤，如何避免使用NodeJs作为答案，好吗？ - D.Dimitrioglo

Answer 1

让我展示一个不使用NodeJs的例子

首先，你需要安装NelmioCorsbundle和FosRestbundle，然后像这样配置它们：

nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: [ 'http://your-domain.com' ] << your frontend
            allow_headers: ['Origin','Accept','Content-Type']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
            hosts:
                - "^(http?://)?api\.your-domain.com?" << your backend as subdomain
fos_rest:
    param_fetcher_listener: true
    body_listener: true
    format_listener: true
    view:
        view_response_listener: 'force'

在您的app.service（前端）中编写通用getter。

yourApp.factory('appService', ['$http', '$q', '$localStorage',
  function($http, $q, $localStorage)
{
  var $this = {};

  $this.mainGetter = function(action, config) {
    var deferred = $q.defer();
    $http({
      method: 'GET',
      url: $this.domain + action,
      params: config
    }).then(function(data) {
      deferred.resolve(data);
    }, function(error) {
      deferred.reject(error);
    });
    return deferred.promise;
  };

  return $this;
}]);

然后在您的后端创建一个端点。

/**
 * API Controller
 * @CFG\Route("/api")
 */
class ApiController extends FOSRestController
{
    /**
     * @CFG\Route("/get-something", name="get_smt")
     * @CFG\Method("GET")
     * @param Request $request
     * @return JsonResponse
     */
    public function getPostsAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();
        $something = $em->getRepository('SomeRepo')->findAll();

        $serializer = $this->get('jms_serializer');
        return new JsonResponse([
            'isError' => 0,
            'data' => $serializer->serialize($something, 'json')
        ]);
    }
};

最后，从您的Angular控制器或服务中获取数据。

  $this.getApiData = function(alias) {
    var deferred = $q.defer();
    appService.mainGetter('/get-something', {})
      .then(function(response) {
        var data = response.data;
        if (data.isError) {
          deferred.reject(data.error);
        } else {
          deferred.resolve(data.data);
        }
      });
    return deferred.promise;
  };

- D.Dimitrioglo

---

需要使用NelmioCorsBundle和FosRestBundle才能将Symfony2与AngularJS2集成吗？我们有一个具有数百个功能的REST服务。它期望GET或POST并返回soap或json。我宁愿让这个服务保持原样。 - Olivier de Jonge

我添加了一张截图。 - Olivier de Jonge

如果您能够配置后端以从另一个域或子域接收调用，那么我认为不必使用NelmioCorsBundle和FosRestBundle。 - D.Dimitrioglo

据我理解，这正是发生的情况 - 您的后端拒绝来自前端的HTTP调用，我是对的吗？ - D.Dimitrioglo

不是后端在抱怨（请参见上面的截图），而是Angular说“Angular 2正在运行开发模式。调用enableProdMode（）以启用生产模式” - Olivier de Jonge

这只是一条通知，不是错误。请不要关注它。 - D.Dimitrioglo

Answer 2

好的，谢谢D.Dimitrioglo最后的评论，“这只是一个通知，不是错误，请不要关注它”，所以我没有花时间去弄清楚为什么我的主机不支持。不过我需要nodejs来将我使用的TypeScript编译成JavaScript，所以那不是问题所在。此外，我并不明确需要NelmioCorseBundle和FosRestBundle。我的问题是

1. 我必须在我的php项目根目录中进行适当的npm清理/安装，而不是从我的angularjs/文件夹中复制粘贴。
2. angular/router-deprecated（将url路由到项目中的不同页面）与Symfony2路由功能冲突，因此当我删除了angular路由器时，它显示了正确的页面，并且可以从localhost:8888运行。

之后我的会话在登录后得以保留！感谢您的评论，它引导我朝着正确的方向前进！

- Olivier de Jonge