Question

我在Symfony2和Angular JS做一个项目。我已经安装了FOSJsRoutingBundle用于路由。这是我的主页 - http://localhost/stars/admin/，我正在使用wamp服务器。

首页字很好。你可以看到一个侧栏，里面有太阳，星星，家等等链接。我的要求是当我点击这些链接时，它应该使用angularjs路由，而不是默认路由.. 我怎么能实现这个.. 我的layout.html.twig

<body ng-app="myApp">
        <div class="container">
            <!--Header Bar-->
            <div id="header"></div>
            <!--Side Bar-->
            <div id="sidebar">
                <ul class="sidebar-menu">
                    <li class="active treeview">
                        <a href="#">
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#sun">
                            <span>Sun</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/stars">
                            <span>Stars</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/planets">
                            <span>Planets</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/moon">
                            <span>Moon</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--Main Content-->
            <div id="content" ng-view>{% block body %}{% endblock %} </div>
        </div>
    </body>
    <!--Angular JS-->
    <script src="{{ asset('js/angular.js') }}"></script>
    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
    <script type="text/javascript">
        Routing.generate('_home_url');
    </script>
    <script>
        var app = angular.module('myApp', ['ngRoute']);
        app.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
              when('', {templateUrl: Routing.generate('_home_url')}).
              when('/sun', {templateUrl: Routing.generate('_sun_url')}).
              otherwise({redirectTo: ''});
            }]);
    </script>

我的routing.yml

# app/config/routing.yml
fos_js_routing:
    resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"

_home_url:
    pattern: admin/
    defaults: { _controller: AppBundle:admin/index:list }
    options:
        expose: true

_sun_url:
    pattern: admin/sun
    defaults: { _controller: AppBundle:admin/sun:index }
    options:
        expose: true

我的config.yml

fos_js_routing:
    routes_to_expose: [ _home_url,_sun_url ]

请帮助我，我是symfony2和angularJS的新用户..

Answer 1

您可以使用ngHref指令查看this 参考

<a ng-href="/sun"><span>Sun</span></a>

或者您可以使用ui-router 对角度ngRoute进行替换，您可以对链接使用ui-sref指令，请参阅this参考

AngularJS和Symfony2路由 - FOSJsRoutingBundle

1 个答案: