CODEWITHSUNDEEP
angularjssymfony
utkarsh2k2
utkarsh2k2

Reputation: 1096

AngularJS with Symfony2 (friendsofsymfony/jsrouting-bundle)

I have created a simple AngularApp and am trying to use it with symfony2.8 . As suggested I am using friendsofsymfony/jsrouting-bundle to expose my route. Here is my twig(HTML) code ie. 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 %}

I am pretty sure I am making some mistake here. Here is the AngularJS code ie. 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;                
        });
});

And if it is needed here is the todos.json :

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

When I try to run the output I get is enter image description here

As you can notice in the console angular.element($0).scope() returns undefined.

Any ideas?

EDIT:

I have made some changes in 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 is here:

<!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>

As you can see the AngularJS code is not in external file, but inside the tag in the twig(HTML) file. Now I get following result : enter image description here

In the console angular.element($0).scope() returns Child {$id: "003", this: Child, $$listeners: Object, $parent: Object, $$asyncQueue: Array[0]…}

But angular.element($0).scope().todos returns undefined.

What parameter should I give to Routing.generate method in this line $http.get(Routing.generate('@AppBundle/Resources/public/js/todos.json')) ?

I think anyone with experience on FOSjsRouting Bundle should be able to figure it out.

Any geniuses out there?

Upvotes: 0

Views: 94

Answers (1)

Mahendra Kavathiya
Mahendra Kavathiya

Reputation: 118

Try This one on twig {{"{{todo.text}}"}} - {{"{{todo.done}}"}}

Upvotes: 1

Related Questions