Using FOSJsRoutingBundle with simple html pages & angularJs

Question

As I've asked in my last question here I try to write an angularJs client to consume symfony2 restful api. This is my angular module :

var app = angular.module('myApp', ['ngRoute']);
app.factory("services", ['$http', function($http) {
var serviceBase = '/myproject/web/app_dev.php/api/';


var obj = {};
obj.getCategories = function(){
return $http.get(serviceBase + 'categories');
}
obj.getCategorie = function(CostumerID){
return $http.get(serviceBase + 'costumer?id=' + CostumerID);
}

obj.deleteCostumer = function (id) {
return $http.delete(serviceBase + 'deleteCostumer?id=' + id).then(function (status) {
return status.data;
});
};

return obj;
}]);

app.controller('listCtrl', function ($scope, services) {
services.getCategories().then(function(data){
$scope.categorie = data.data;
});
});

I have created an index page :

<!DOCTYPE html>
<html data-ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
        <div>
        <div class="container">
        <div data-ng-view="" id="ng-view"></div>
        </div>
        </div>
        <script src="/angular/angular.min.js"></script>
        <script src="/app/app.js"></script>
    </body>
</html>

I found that I can use FOSJsRoutingBundle to generate route for my app but in the documentation I should add this two line to my code :

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>

But I don't use twig and I don't know hwo can I use it?

Also I don't know which url should I ask at first time to run the application because when I ask for index I have a blank page :(

Can someone help me and tell me what should I do or what I've missed?

You have missed something after "should add this two line to my code :" — Sergio Ivanuzzo
– Sergio Ivanuzzo, Commented Nov 22, 2015 at 6:56
Thanks @SergioIvanuzzo for your comments.Ijust add the two lines I've missed. Yes I try to develop backend part and frontend part as separate part but I don't know how can I make connection between the two parts. even if I call api url in my app.js I still have a blank page when I call the index.html — Akino
– Akino, Commented Nov 22, 2015 at 8:10
your actions in controller shoud returns JsonResponse(), so you can easily get it by simple $http request from angular. — Sergio Ivanuzzo
– Sergio Ivanuzzo, Commented Nov 22, 2015 at 11:26
That's exactly what I've did .. I test the response of my controller whith postman (google extension) and it a JsonResponse..should I add something else to reformat this response even if it is Json ? — Akino
– Akino, Commented Nov 22, 2015 at 11:29

Hendra Huang · Accepted Answer · 2015-11-24 15:33:48Z

For default configuration, you can get FOSJSRouting js files from:

@FOSJsRoutingBundle/Resources/public/js/router.js
js/fos_js_routes.js

Then you can use the assetic in symfony (read this documentation for more info), include js files above, and specify the output files for example to js/compiled.js. Then update your html to something like this

<!DOCTYPE html>
<html data-ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
        <div>
        <div class="container">
        <div data-ng-view="" id="ng-view"></div>
        </div>
        </div>
        <script src="/angular/angular.min.js"></script>
        <script src="/js/compiled.js"></script>
        <script src="/app/app.js"></script>
    </body>
</html>

In your app.js, you can get url from Symfony Routing in this way

var url = window.Routing.generate(route, params, absolute);

Hope it helps

Collectives™ on Stack Overflow

Using FOSJsRoutingBundle with simple html pages & angularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related