使用 Angular 和 Symfony 进行路由答案

【问题标题】：Routing with angular and Symfony使用 Angular 和 Symfony 进行路由
【发布时间】：2015-02-22 12:48:44
【问题描述】：

我在使用 symfony 和 Angular 时遇到了一些路线问题。我试图为我的项目和我的 symfony 后端调整这个tutorial。但是无论我在我的主 html 页面或我的 js 角度文件中做什么，当我检查一个元素（使用 chrome 工具）时，包含我的 ng-view 的我的 div 总是在评论中。如果路由不起作用，我在论坛上读到 angularjs cmets ng-view。有人可以帮忙解决这个路线问题吗？

编辑：Angular 似乎获得了路由，但无法检索 html 部分 html，因为控制台在每个调用的 html 页面上都显示 404。有谁知道我应该把我的 html 部分文件放在哪里？

编辑 2：我终于找到了静态 html 文件的路径，但网络服务器返回 403 错误（禁止）。你知道我如何访问这个文件吗？

这是文件：

layout.html.twig（主模板）：

<!DOCTYPE HTML>
<html ng-app="adcApp">
    <head>
        <meta charset="utf-8">
        {% stylesheets filter='cssrewrite'
        'Resources/css/bootstrap.min.css'%}
            <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
        {% endstylesheets %}
        {% javascripts
            'Resources/js/jquery-1.9.1.js'
            'Resources/js/bootstrap.js'
            'Resources/js/angular.js'
            'Resources/js/angular-route.js'
            'Resources/js/app.js'
            'Resources/js/Controllers.js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
        <title>ADC-WebApp</title>
    </head>
    <body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" ng-href="">ADC-WebApp</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="">Plan de production
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/Comparaison">Comparaison</a></li>
                            <li><a href="#/Param">Paramètres</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row">
        <div ng-view></div>
    </div>
    </body>
</html>

app.js：

'use strict';

var adcApp = angular.module('adcApp', ['ngRoute', 'adcAppControllers']);

adcApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); //Conflict with twig
});

adcApp.config(['$routeProvider', function($routeProvider)
{
    $routeProvider.when('/OGPP/#/Comparaison',
        {
            templateUrl: 'partials/Comparaison.html',
            controller: 'ComparaisonCtrl'
        })
        .when('/OGPP/#/Param',
        {
            templateUrl: 'partials/Param.html',
            controller: 'ParamCtrl'
        })
        .when('/OGPP',
        {
            templateUrl: 'partials/index.html',
            controller: 'HomeCtrl'
        });
}]);

PHP 控制器：

class OgppController extends Controller
{
    public function indexAction()
    {
        $content = $this->render('ADCOgppBundle:Ogpp:layout.html.twig');
        return new Response($content);
    }
}

我的 partial 文件夹与我的 layout.html.twig (BundleDir/Resources/Views/Bundle) 位于同一目录中。我的所有控制器都已声明，但它们只是在控制台中输出一些文本，没有打印任何内容。

【问题讨论】：

在您的 $routeProvider 中，从您的路由 url 中删除 /OGPP/，您的路由器与菜单中设置的锚点不匹配
感谢您的回答。 ngview 仍然被评论，所以它不起作用。我在 stackoverflow 上看到了一篇文章，它尝试使用在 javascript (FOSJsRoutingBundle) 中生成路由的包。你认为这能解决我的问题吗？
编辑：chrome 控制台现在显示我有一个 404 错误，找不到部分 html 文件。
检查你的partials的templateUrl和它们在你的symphony路由器中的正确路由
您的意思是在 symfony 文件路由器 (routing.yaml) 中？还是我的部分文件的路径？

标签： javascript angularjs symfony routes

【解决方案1】：

所以最后我成功了。我是 angularjs 和 Symfony 的新手，所以我会写下我所做的一切以使我的路由正常工作。

1st ：在使用角度路线时，不要放置/#/，在此之后开始您的路线。 Angular 路由在这个 url 之后开始。更多详情here（第一个答案）

2nd：在你的 templateUrl 中，从你的项目目录开始写你的 完整路径。例如，如果您正在使用 wamp（我的情况）并且您的项目名称是“Symfony”，那么如果您使用 partial 作为局部视图的目录名称，那么路径是：WampInstall/Symfony\src\projectName\BundleName\Resources\views\BundleName\partials。

3rd：Apache 不允许 angularjs 发出GET 请求。所以你必须配置它。我将.htaccess 文件更改为.src Symfony 目录。这是我关注的link。但我不确定这对 Web 服务器的安全性是否安全。

在此之后，一切都应该正常了。

【讨论】：

【解决方案2】：

一般来说，混合 Symfony 和 Angular 并不是最好的方法。如果您将视图和后端完全分开，您的应用将更易于维护。

但如果你想这样做，你可以使用一些现有的插件来处理 JavaSripts 中的 Symfony 路由。

让 Symfony 和 Angular 顺利协同工作的最简单方法是将 Angular html 封装在组件中（以避免与 Twig 冲突）。比你可以像这样将你的 baseUrl 传递给那些组件：

<componentName baseurl="{{ app.request.scheme ~ '://' ~ 
app.request.httpHost ~ app.request.basePath }}"></componentName >

然后在你的 templateUrl 函数中使用它

    templateUrl: function($attrs) {
                return $attrs.baseurl + 'templates/componentName.template.html';
            }

瞧，不漂亮但可行的解决方案。

【讨论】：