Top Contributors

How are you using AngularJS?

AngularJS is packed with functionality but often I see it being used only because of the model binding.

Are you using the full stack or just a subset? Why so?
View Previous CommentsLoad All Comments (12)
Rank: Genius

Author Comment

Alexandre Simões2015-03-04 06:29 AMID: 147346
Hi @justaphase, I have two different approaches compared to you when it comes to organize my files.

First is the modules separation:
For me, controllers belong to the same module where they're developed for. This means that I only import external references, like cross application factories, services and directives... nothing else.
Application specific things go in the same module and directory tree as the app module.

File bundling
Here my rule is to strictly keep each component in each own file.
I don't care if at the end there are 100 .js files. Everything will be minified and bundled in a logic way resulting in 2 ou 3 files maximum.
My strategy is to have a vendor.js and a application.js bundles.
The vendor bundle will have all the third party scripts that don't change often, like Angular, jQuery, moment, underscore, ... whatever...
The application bundle will have all our angular .js files.
With this strategy you can change your application version and still take advantage of the vendor bundle being cached by the user browser.

I hope it made any sense :)
Cheers!
0

Expert Comment

justaphase2015-03-04 07:58 AMID: 147351
hmm.. i don't agree with controller being part of module they're developed for, because you can have several types of goals for you controllers, and you may want to use some controllers for a type of project or not, for example i have a js file with controllers for Ecommerce Websites and other controllers for content/media websites.
And the main module that gathers all the other modules can be used only for global configurations like this for example:
angular.module('app', ['app.controllers', 'app.services', 'app.directives'])

// Intercept ajax calls when they finish
.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headersGetter) {
        // todo start the spinner here
        //alert('start spinner');
        //$('#ngdiv-loader').show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
})

Open in new window


With the file bundling i total agree.

Miguel
0
Rank: Genius

Author Comment

Alexandre Simões2015-03-04 09:15 AMID: 147360
I'm having a bit of trouble figuring out what a generic controller...
Because controllers can't, for instance, fetch data, they should rely on services/factories.
Controllers also can't know anything about the views.

So basically controllers are just a passage, something needed to aggregate services and build the model to feed a view.

You can even have in the view specific calls to functions in the controller. In this case, and if it's a reusable piece of code, you should create a directive and put it in a separate module, not the controller.
With the directive you can (have to) pass the needed data in avoiding implicit dependencies.

So that's why a say that services, factories and directives can be isolated in a module, but not controllers.
0

Expert Comment

justaphase2015-03-05 02:04 AMID: 147451
To me, everything can be isolated.
imo controller it's all about behaviors. You have a service/factory that gives you data, and that factory can give you several type of data or perform different kind of operations in a ajax call to a file (php, aspx, whatever) that deals SQL, like this:
.factory('basketSrv', function ($http) {
    return {
        all: function () {
            var params = {
                params: {
                    online: 1
                }
            };
            return $http.get(BASE_URL + 'ajax_sql/sql_basket.php', params);
        },
        remove: function (stamp) {
            var params = {
                params: {
                    stamp: stamp
                }
            };
            return $http.get(BASE_URL + 'ajax_sql/sql_basket.php', params);
        },
        update: function (stamp, qtt, discount) {
            var params = {
                params: {
                    stamp: stamp,
                    qtt: qtt,
                    discount: discount
                }
            };
            return $http.get(BASE_URL + 'ajax_sql/sql_basket.php', params);
        }
    }
})

Open in new window

Lot of controllers can use that service in many different scenarios. The controller may use jQuery and javascript to interact with the DOM, and sometimes i have a two different controllers to do basically the same thing in SQL, but apply different "common" behaviors, so i have them isolated maybe to two different kinds of eCommerce websites for example.

I got many of this ideas from the "Getting Started" page of the Ionic framework, i loved the way they organized the code in the example projects (http://ionicframework.com/getting-started/).
0
Rank: Genius

Author Comment

Alexandre Simões2015-03-05 02:30 AMID: 147457
The controller may use jQuery and javascript to interact with the DOM
This in my opinion should never happen. In the theoretic perspective you're breaking the MVC pattern but worst, you're making an implicit dependency between the controller and the view.
If you need to interact with the DOM, create a directive and feed it with the data from the Controller.

... and sometimes i have a two different controllers to do basically the same thing in SQL
It's fine as long as the $http service is not referenced in the controller :)
Basically they'll must share the same Service/Factory that handles the data interaction.

Like this the Controller itself will be very lean. Its main goal will be to aggregate all the needed services and feed the view and its directives.

Anyway, you're also Portuguese! :)
Abraço!
0

Expert Comment

justaphase2015-03-05 02:41 AMID: 147460
Yeah i'm Portuguese to ;)

I admit i'm still new at Angular, i've been learning the fasted i can.
I agree with you about the controllers. But reality is not always our friend unfortunately.
Why i say this? Many sometimes i have to work with low budgets websites and use templates.. true story, many clients don't mind to use web templates.
And as you can imagine, transform all that "not build by me" html and "not chosen by me plugins" into Angular plugins and directives it's just horrible, so sometimes i'm forced to devise things with jQuery/javascript/DOM based controllers :(

But i agree with what you said.
0