What is the point of AngularJS routes?

Question

Im creating a website and I chose to do it in AJ. I have two folders:
Gateways => some php files which retrive data from a mysql db and echos the data as json.
Views => Partial html files which are basically the template for each page. eg Users, Items, etc.

then I have a index.js file which handels the request process and routing:

angular.module('Index',['addon'],function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true).hashPrefix("!");
    $routeProvider.otherwise({
        templateUrl: '/views/index.html',
        controller: "index"
    }).when("/items/",{
        templateUrl: '/views/items.html',
        controller: "items"
    })
}).
controller("index",function($scope,$http){

    $scope.users = [];
    $http.get("gateways/list.php").
    success(function(d){
        console.log(d);
        if(angular.isArray(d)){
            $scope.users = d;
        }
    });

}).
controller("items",function($scope,$http,$routeParams){
    $scope.items = [];
    $http.get("gateways/single.php").
    success(function(d){
        if(angular.isArray(d)){
            $scope.items = d;
        }
    });

}).

What is the point of all this route providers in AJ except its elegancy? Dont they just slow down the site because of number of the requests? I could just write the php code from the gateways files directly in the templates files? Am I doing it in the wrong way?

Answer 1

You might be missing the point of using frameworks like AngularJS. They are mostly for Single Page application and ajax intensive. And let me begin that the number of requests don't really slow down application. Remember how Gmail used to be at first without Ajax ? Was it faster than the current implementation ?

Now, when you build a single page application, the app sends req to server and server responds in JSON or XML. In frameworks like AngularJS or any other, server sends the JSON response and we render them using client side templates or DOM. This saves enormous resource from the server side since server doesn't have to parse the array and render the template. So if server had to render a table which has 100 rows, the bandwidth to send to your browser might be 20KB whereas only JSON might be 5KB and a string or DOM template with 1KB to do the rendering. So, you're actually having your visitor's browser do a lot of job. It's all about calculations/computations. Think of a statistics table where there are columns and some computed values to be presented in a data grid. With Client side frameworks, your server would just respond as JSON and browser (with JavaScript) will parse,calculate and render it in template.

As for the question of using a routerProvider, it's essential to bookmark and use browser navigation button. Just like a traditional url has a view, a URL in client side app has a view which should be bookmarkable and should support navigation.

Answer 2

AngularJS, as a JS framework, works it's magic in the client - meaning it's your computer that processes the template files, applying any logic needed. PHP can't do that - it's a strictly server-side language. When you request a PHP "file" via AJAX calls, you don't really get the php file, but the processed output that your servers produces (in this case, a list of users that it will map to an object). If you simply include the PHP logic in your templates, in the best of cases the HTML that angularJS reads will have the list you need to show, but there won't be an actual list model (that angular can filter/change/reorder/save/delete at will) in the angular scope.

But you are right, at the level you are working on it can seem to only complicate and slow down processes (with the minor advantage of simplifying your work). But when things get denser, that modularization (and separating the controller (i.e. Users controller) from the different views it can be applied to (view, list, edit, details, etc) is what keeps your application structured.

Answer 3

I don't think they slow down the site in any way. If your concern is retrieving both the html and the json for each page, that is not how it works.

The html templates are retrieved, compiled and cached only once by angular-js. You can see this using some debug tool, like firebug.

So when the user switches to a different page you only make a json request to the server, which -generally- is a faster and lightweight operation than rendering html server side and retrieving the full html. (anyway, nothing stops you from doing that if it is better for you)