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
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 :
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?
