AngularJs - Organization of files for large project

Question

AngularJs - Organization of files for large project

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

My question is not about codes properly, but about how to better organize project files.

I know this is an issue that does not have a right answer, nor does it have the best answer. But as I am developing a project now where I am encountering various areas and functions, I would like to know of you the tips or guidelines you can give to improve this organization and not get lost amid so many files in the future.

I currently have an organization in this style:

-js  //Arquivos Js necessários para rodar o app
    --angular.min.js
    --angular-animate.min.js
    --angular-local-storage.min.js
    --angular-touch.min.js
    --oc-lazyload.min.js
    --ui-router.min.js

-App //escrito por eu mesmo
    --controller    - todos os controllers
    --directives    - todos os directives
    --factory       - todas as factorys
    --app.js        - configurações principais (router, filter, config)

-Lib //modulo de terceiros
    --ngMask.min.js
    --ngTooltip.min.js
    --ngMap.min.js
    -- [..etc..]

However, after some classes I learned more about modulating the code and I was also able to do lazyload of files. That is, a lot of the code I have, I will be able to segment according to the area. For example:

Currently my webApp has 3 different areas:

User: Anyone who signs up for the site;
Moderators / Attendants: people who service, check, handle some restricted areas of the company;
Administrators: Control sales flow, reports, etc.

For this I am thinking of using lazyload , to improve the security and speed of webApp , since I will only load the module that is really necessary for that determined view . But that's where things start to complicate.

In a quick structural outline I wrote, this was the framework I got:

-App //escrito por eu mesmo
    --Controller
        ---ctrl-admin.js
        ---ctrl-empresa.js
        ---ctrl-comum.js
    --Directive
        ---dire-admin.js
        ---dire-empresa.js
        ---dire-comum.js
    --Factory
        ---fact-admin.js
        ---fact-empresa.js
        ---fact-comum.js
    --Config
        ---config.js
    --app.js //config da rota, autenticação, etc.


-Lib
    --main  //Arquivos Js necessários para rodar o app
        ---angular.min.js
        ---angular-animate.min.js
        ---angular-local-storage.min.js
        ---angular-touch.min.js
        ---oc-lazyload.min.js
        ---ui-router.min.js

    --modulos   //lib de terceiros, secundárias (tooltip, ngImago, etc.)
        ---main     //principais - comum a todos - (escritas por eu mesmo)
            ----ngLogin.min.js //processa login
            ----ngCart.min.js //carrinho de compras
            ----ngAlert.min.js //notificação de pedidos, mensagens, novo ticket, etc.

        ---sec      //secundarias - modular - (de terceiros)
            ----ngMap.js - somente carrega em view X
            ----ngMask.js - somente carrega em view Y
            ----ngTooltip.js - somente carrega em view Y, view Z
            [.. etc ..]

As you can see, this structure starts to get a bit 'messy' and you have to be very careful because I can start losing myself, especially since some of these files (or a large majority) will have to pass concat .

And it needs to be separate because, for example, the files uglify , ctrl-admin and dire-admin , will only be loaded in the views for administrators (controlled by fact-admin ).

Would you have any suggestions? ocLazyLoad ? Suggestion or any guide that I can study and improve this structure?

angularjs

asked by anonymous 11.11.2015 / 01:03

2 answers

2

My personal experience has led me to adopt a structure similar to that offered in this blog post .

In summary -

Most angular focused tutorials mention a structure similar to this:

app/
    controllers/
        mainController.js
        otherController.js
    directives/
        mainDirective.js
        otherDirective.js
    services/
        userService.js
        itemService.js
    js/
        bootstrap.js
        jquery.js
    app.js
views/
    mainView.html
    otherView.html
    index.html

The problem is this structure works only if you have a small number of work units (such as item , which is made up of a controller, a policy, and a service.) How easy it is to organize your work, or search a file, if your project has 30, 40 or more drives? (for example, I have a project with 48.)

Instead, promote a modularized structure by functionality:

app/
    shared/   // Componentes reutilizáveis ou Partials do site
        sidebar/
            sidebarDirective.js
            sidebarView.html
        article/
            articleDirective.js
            articleView.html
        account/
            accountService.js
    components/   // Cada componente é tratado como uma mini-aplicação Angular
        home/
            homeController.js
            homeService.js
            homeView.html
        blog/
            blogController.js
            blogService.js
            blogView.html
    app.module.js
    app.routes.js
assets/
    img/      
    css/      
    js/       
    libs/     
index.html

This model makes maintenance much easier, as all the parts needed to maintain a given functionality are in the same directory.

11.11.2015 / 15:07

How to remove the / home / URL of a View specifies ASP.NET MVC5 How to make a link trigger a javascript function without redirection? [duplicate]

score 3 · Accepted Answer

The first point I would like to address is with respect to libs, most Angular projects of the present time use the dependency manager bower , bower is responsible for controlling the libs versions of the project, and saves them by default in the bower_components folder, so this distribution of libs you're doing is different from the common one and probably harder to maintain.

As you said, there is no right and wrong in this case, but I believe it would be better to separate your controllers, services, and the like, by modules rather than by type, so you can better group what part of a particular angular module.

As for the name of the files created by the application, a strong recommendation is that each file has its name, plus a '.' and the type of it, example: cadastroUsuario.ctrl.js , usuarios.module.js , cadastroUsuario.service.js , this allows you within a given module to easily identify the file, and even write automated tasks based on these names.

These are simple recommendations for organization, and there are also code recommendations, the following guidelines present both one from Todd Motto and one from Jhon Papa, both well known in the angular community.

link