我正在尝试将 symfony2 和 AngularJs 一起使用，但我做不到，
- 我与路由发生冲突
- Angular 无法识别 Twig 模板中的 Angular 符号。
这是我的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'
});
}]);
这是我的页面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';
}
]);
然后我的 Controller 在 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 错误:找不到“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: [$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....
所以我想知道我做错了什么？
最佳答案
将 symfony 与 Angular 集成时，您需要考虑更多事情。
- 路由应该完全在客户端处理。 Symfony 应该只渲染初始索引路由。如果您使用服务器端渲染，那么这里的 Angular 就没有意义。
- 后端应充当 API 提供者，前端应相应地采取行动
身份验证、授权 - 至少有几种可能性
- WSSE - 无状态，基于 token
- 基于 cookie - 您需要有自定义身份验证处理程序和注销成功处理程序来发送 JSON 响应
使用verbatim标签而不是在 Angular 中自定义插值符号 - 它可能会破坏第三方插件或指令。
两个例子
- https://github.com/thujeevan/sad - 使用基于 cookie 的身份验证
- https://github.com/FlyersWeb/angular-symfony - 使用基于 WSSE 的身份验证
希望你能 catch
关于javascript - AngularJS 和 Symfony 的路由问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30722182/