使用 angular 和 Symfony 进行路由

Question

使用 angular 和 Symfony 进行路由

Tri*_*hel 5 javascript routes symfony angularjs

我在使用 symfony 和 angular 时遇到了一些路线问题。我尝试为我的项目和我的 symfony 后端改编本教程。但是无论我在我的主 html 页面或我的 js 角度文件中做什么，当我检查一个元素（使用 chrome 工具）时，包含我的 ng-view 的 div 总是在评论中。我在论坛上读到 angularjs 评论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>

Run Code Online (Sandbox Code Playgroud)

应用程序.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'
        });
}]);

Run Code Online (Sandbox Code Playgroud)

PHP控制器：

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Tri*_*hel 3

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

第一：在角度中使用路线时，不要将/#/, 紧接在此之后开始您的路线。角度路由在此 url 之后开始。更多详细信息请参见此处（第一个答案）

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

第三：Apache 不允许 angularjs 发出请求GET。所以你必须配置它。我更改了Symfony 目录中的.htaccess文件.src。这是我点击的链接。但我不确定这对于网络服务器的安全是否安全。

之后，一切都应该正常。

归档时间：	10 年，12 月前
查看次数：	4266 次
最近记录：	8 年，3 月前