AngularJS和Symfony的路由问题

Question

I'm trying to work with symfony2 and AngularJs together, but I cant, 我正在尝试与symfony2和AngularJs一起工作，但是我不能，

I've conflicts with the rounting 我跟这个地方有冲突
Angular does not recognize the Angular symbols in twig templates. Angular无法识别树枝模板中的Angular符号。

This is my app.js that is in AppBundle/Resoures/public/js/app.js 这是我的app.js是在AppBundle/Resoures/public/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'
    });
}]);

This is my page index.html.twig that has a dummy content 这是我的页面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>

And this is my Angular controller to setup the title variable 这是我用来设置title变量的Angular controller

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

Then my controller in symfony to handle the app_grupos_index 然后我的控制器在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');
  }
}

Note that I'm using FOSJsRoutingBundle to expose the symfony routes to Javascript 请注意，我正在使用FOSJsRoutingBundle将symfony路由公开给Javascript

Problems: 问题：

If I go to the route http://localhost:8000/grupos in the browser I get the following Symfony error : 如果在浏览器中转到路由http://localhost:8000/grupos ， http://localhost:8000/grupos出现以下Symfony error ：
No route found for "GET /grupos"

This problem make me think in that Angular is not working with the routing 这个问题让我想到Angular无法使用路由
If I modify the Symfony controller to handle the route /grupos like this: 如果我修改Symfony controller以处理如下路由/grupos ：

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

I get my page with the explicit [[title]] string and the following Angular error : 我的页面带有显式[[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....

So, I'm wondering what am I doing wrong? 所以，我想知道我在做什么错？

Answer 1

There are lot more things you'll need to consider when integrating symfony with angular. 将symfony与angular集成时，您还需要考虑很多其他事项。

Routing should completely handled in client side. 路由应该在客户端完全处理。 Symfony should only render the initial index route. Symfony应该只呈现初始索引路径。 There is no point of having angular here if you'd use server side rendering. 如果要使用服务器端渲染，这里没有角度的意义。
Backend should act as an API provider, and frontend should act accordingly 后端应充当API提供者，前端应相应地充当
Authentication, Authorization - couple of possibilities at least 认证，授权-至少有两种可能性
- WSSE - stateless, token based WSSE-无状态，基于令牌
- cookie based - You'll need to have custom authentication handlers and logout success handlers to send JSON responses 基于Cookie-您需要具有自定义身份验证处理程序和注销成功处理程序才能发送JSON响应
Use verbatim tags than customizing interpolation symbols in angular - it'll likely to break third party plugins or directives. 使用逐字标记而不是按角度自定义插值符号-这很可能会破坏第三方插件或指令。

Two examples 两个例子

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

Hope, you'll catch things up 希望你能赶上一切

AngularJS和Symfony的路由问题

问题描述

1 个解决方案

解决方案1
0 2015-06-09 06:52:30

AngularJS和Symfony的路由问题

问题描述

1 个解决方案

解决方案1 0 2015-06-09 06:52:30

解决方案1
0 2015-06-09 06:52:30