AngularJS 和 Symfony 的路由问题答案

【问题标题】：Routing problems with AngularJS and SymfonyAngularJS 和 Symfony 的路由问题
【发布时间】：2015-06-09 02:42:54
【问题描述】：

我正在尝试同时使用 symfony2 和 AngularJs，但我不能，

我与循环发生冲突
Angular 无法识别树枝模板中的 Angular 符号。

这是我在AppBundle/Resoures/public/js/app.js中的app.js

var app = angular.module('uifi',[]);

app.config(['$stateProvider','$interpolateProvider',
  function($stateProvider,$interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');

    $stateProvider.state('grupos', {
        url: '/grupos',
        templateUrl: Routing.generate('app_grupos_index'),
        controller : 'GruposController'
    });
}]);

这是我的页面index.html.twig，其中包含虚拟内容

<html ng-app="uifi">

<body>

    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>

    <script src="{{ asset('js/angular.min.js') }}"></script>
    <script src="{{ asset('bundles/app/js/app.js') }}"></script>
    <script src="{{ asset('bundles/app/js/controllers/GrupoController.js') }}"></script>

    <div ng-controller="GruposController">
        [[title]]
    </div>
</body>
</html>

这是我的Angular controller 来设置title 变量

app.controller('GruposController',['$scope',
  function($scope){
      $scope.title ='Research groups';
  }
]);

然后我的控制器在symfony 处理app_grupos_index

class GruposController extends Controller{

  /**
   * @Route(name="app_list_grupos",options={"expose"=true})
   */
  public function getListGrupos(){
    $grupos = $this->get('uifi.integrantes.grupos')->getGrupos();
    return new JsonResponse( array('grupos'=> $grupos) );
  }

  /**
   * @Route(name="app_grupos_index",options={"expose"=true})
   */
  public function indexAction(){
    return  $this->render('AppBundle:Grupos:index.html.twig');
  }
}

请注意，我使用 FOSJsRoutingBundle 将 symfony 路由公开给 Javascript

问题：

如果我在浏览器中转到路线http://localhost:8000/grupos，我会得到以下Symfony error：

No route found for "GET /grupos"

这个问题让我觉得 Angular 不支持路由
如果我修改Symfony controller 来处理/grupos 这样的路由：

  /**
   * @Route("/grupos",name="app_grupos_index",options={"expose"=true})
   */
  public function indexAction(){
    return  $this->render('AppBundle:Grupos:index.html.twig');
  }

我的页面带有明确的[[title]] 字符串和以下Angular error：

Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector
/modulerr?p0=uifi&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F
%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1....

所以，我想知道我做错了什么？

【问题讨论】：

如果我去http://localhost:8000/#grupos，我有一条路线可以处理去http://localhost:8000/的所有事情，然后重定向到http://localhost:8000/login，那么我就在http://localhost:8000/login：/
好吧，首先你可能应该包含 ui-router JS 文件并将 'ui.router' 添加到你的模块的依赖项中
谢谢你，你解决了我的错误：D

标签： javascript php angularjs symfony

【解决方案1】：

在将 symfony 与 angular 集成时，您需要考虑更多的事情。

路由应该完全在客户端处理。 Symfony 应该只渲染初始索引路由。如果您使用服务器端渲染，这里没有任何角度。
后端应充当 API 提供者，前端应采取相应措施
身份验证、授权 - 至少有几种可能性
- WSSE - 无状态，基于令牌
- 基于 cookie - 您需要自定义身份验证处理程序和注销成功处理程序来发送 JSON 响应
使用 verbatim 标签而不是自定义插值符号 - 这可能会破坏第三方插件或指令。

两个例子

https://github.com/thujeevan/sad - 使用基于 cookie 的身份验证
https://github.com/FlyersWeb/angular-symfony - 使用基于 WSSE 的身份验证

希望你能赶上进度

【讨论】：