AngularJS с Symfony2 (friendsofsymfony / jsrouting-bundle)

Question

AngularJS с Symfony2 (friendsofsymfony / jsrouting-bundle)

0

Я создал простой AngularApp и пытаюсь использовать его с symfony2.8. Как я уже сказал, я использую friendsofsymfony/jsrouting-bundle, чтобы разоблачить мой маршрут. Вот мой твиг (HTML), т.е. index.html.twig:

<!doctype html>
<html ng-app="App" >
<head>
  <meta charset="utf-8">
  <title>Todos $http</title>
  <link rel="stylesheet" href="style.css">
  <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
  <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>

{% block body %}
{% verbatim %}
<body ng-controller="TodoCtrl">
  <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
</body>
</html>
{% endverbatim %}
{% endblock %}

Я почти уверен, что здесь ошибаюсь. Вот код AngularJS, т.е. app.js:

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
//    window.alert('hi');
  $http.get(Routing.generate('AppBundle/Resources/public/js/todos.json'))
       .then(function(res){
          $scope.todos = res.data;                
        });
});

И если это необходимо, это todos.json:

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Когда я пытаюсь запустить вывод, я получаю

Как вы можете заметить в консоли angular.element($0).scope() возвращает undefined.

Есть идеи?

РЕДАКТИРОВАТЬ:

Я внес некоторые изменения в index.html.twig:

{% extends 'base.html.twig' %}

{% block javascripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
    <script>
        var App = angular.module('App', []);

        App.controller('TodoCtrl', function($scope, $http) {
//    window.alert('hi');
            $http.get(Routing.generate('@AppBundle/Resources/public/js/todos.json'))
                    .then(function(res) {
                        $scope.todos = res.data;
                    });
        })
    </script>
{% endblock %}
{% block body %}
    {% verbatim %}
        <body ng-app="App" ng-controller="TodoCtrl">
            <ul>
                <li ng-repeat="todo in todos">
                    {{todo.text}} - <em>{{todo.done}}</em>
                </li>
            </ul>
        </body>
    {% endverbatim %}
{% endblock %}

base.html.twig находится здесь:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}

        {% endblock %}
        {% block javascripts %}

        {% endblock %}
    </body>
</html>

Как вы можете видеть, код AngularJS не во внешнем файле, а внутри тега в файле twig (HTML). Теперь я получаю следующий результат:

В консоли angular.element($0).scope() возвращает Child {$id: "003", this: Child, $$listeners: Object, $parent: Object, $$asyncQueue: Array[0]…}

Но angular.element($0).scope().todos возвращает undefined.

Какой параметр я должен предоставить методу Routing.generate в этой строке $http.get(Routing.generate('@AppBundle/Resources/public/js/todos.json'))?

Я думаю, что любой, кто имеет опыт работы с FOSjsRouting Bundle, должен уметь это понять.

Какие-то гении?

utkarsh2k2 30 июнь 2016, в 12:58

Источник

Теги:

angularjs

symfony