AngularJS: estruturando um aplicativo da web com vários ng-apps

38

A blogosfera tem vários artigos sobre o tópico das diretrizes de estruturação do aplicativo AngularJS, como estas (e outras):

No entanto, um cenário que ainda não encontrei para obter diretrizes e práticas recomendadas é o caso de você ter um grande aplicativo Web contendo vários aplicativos "mini-spa" e os aplicativos mini-spa compartilham uma certa quantidade de código .

Não estou me referindo ao caso de tentar ter várias declarações ng-app na mesma página; em vez disso, quero dizer diferentes seções de um site grande que têm sua própria declaração ng-app exclusiva.

Como Scott Allen escreve em seu OdeToCode blog:

One scenario I haven't found addressed very well is the scenario where multiple apps exist in the same greater web application and require some shared code on the client.

Existem algumas abordagens recomendadas, armadilhas para evitar ou boas estruturas de amostra deste cenário que você pode apontar?

Atualização - 9/10/2015
Um projeto com uma estratégia de organização interessante é o MEAN.JS e sua pasta de módulos.
link - link

Outro exemplo é do exemplo do ASP.NET Music Store SPA. link link

    
por mg1075 14.05.2014 / 16:25
fonte

3 respostas

8

Aqui está o design com o qual trabalho. Eu achei útil em dois projetos maiores que eu construí e não atingi nenhum bloqueio de estrada até agora.

Estrutura de pastas

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/
  • Configure a estrutura da web do seu servidor para encontrar apps/app1/index.html quando uma solicitação para /app1 chegar. Use URLs amigáveis (por exemplo, the-first-application/ em vez de app1/ e mapeie-os usando sua tecnologia de servidor, se necessário.
  • Sua tecnologia de servidor deve incluir global.html em index.html , pois contém as inclusões de fornecedores (veja abaixo).
  • Inclua os recursos exigidos pelo respectivo aplicativo em index.html (veja abaixo).
  • Coloque o ng-app e a raiz <div ui-view></div> no index.html .
  • Cada aplicativo e lib são um módulo angular separado.
  • Cada aplicativo recebe um arquivo <app-name>.module.js que contém a definição do módulo angular e a lista de dependências.
  • Cada aplicativo recebe um arquivo <app-name>.js que contém os blocos de configuração e execução dos módulos e a configuração de roteamento como parte dele.
  • Cada aplicativo recebe uma pasta parts que contém os controladores, visualizações, serviços e diretivas dos aplicativos em uma estrutura que faz sentido para o aplicativo específico . Eu não considero as subpastas como controllers/ , views/ etc úteis, porque elas não são escaláveis, mas YMMV.
  • Os libs seguem a mesma estrutura dos apps, mas deixam as coisas de fora que não precisam (obviamente).

Comece com serviços e diretivas no aplicativo em que eles são usados. Assim que você precisar de algo em outro aplicativo também, refatore a biblioteca. Tente criar bibliotecas funcionalmente consistentes, não apenas bibliotecas de todas as diretivas ou de todos os serviços.

Ativos

Minimize os arquivos JS e CSS para as compilações de versão, mas trabalhe com arquivos não-compactados durante o desenvolvimento. Aqui está uma configuração que suporta isso:

  • Gerenciar fornecedor inclui globalmente em global.html . Dessa forma, as coisas pesadas podem ser carregadas do cache durante a navegação entre os SPAs. Verifique se o armazenamento em cache funciona adequadamente.
  • Os ativos por SPA são definidos em index.html . Isso deve incluir apenas os arquivos específicos do aplicativo, bem como as bibliotecas usadas.

A estrutura de pastas acima facilita a localização dos arquivos corretos para as etapas de compilação de minificação.

    
por 03.09.2015 / 18:52
fonte
7

Os Apps de Página Única (SPAs) não têm a intenção de serem usados da maneira que você está sugerindo com um aplicativo realmente grande e vários mini-SPAs no principal. O maior problema será o tempo de carregamento da página, pois tudo tem que ser carregado na frente.

Uma forma de resolver isso é usando uma página de navegação que o levará a SPAs individuais. A página de navegação será bastante leve e, em seguida, você só carregará um SPA por vez com base no que foi selecionado. Você pode fornecer uma barra de links com links de navegação dentro de cada um dos seus SPAs para que os usuários nem sempre tenham que voltar para a página de navegação quando precisarem ir para outra área.

O uso dessa abordagem pode criar alguns desafios com informações persistentes entre os SPAs. Mas estamos falando de algo que os SPAs não foram destinados a fazer. Existem alguns frameworks que podem ajudar na persistência de dados do lado do cliente. O Breeze é o primeiro que vem à mente, mas existem outros.

Em relação ao layout - várias perguntas dos programadores abordam o layout de grandes projetos, dependendo de suas necessidades específicas. Eu encontrei este e este . Não há nada de mágico nos SPAs que possam afetar o layout do aplicativo além do que já foi respondido nessas perguntas.

Dito isto, existem abordagens diferentes que funcionam melhor para diferentes projetos. Eu recomendaria manter o layout de base conforme previsto pelo projeto de sementeira angular. Crie pastas separadas das fornecidas para seus pacotes personalizados e código-fonte. E dentro da sua pasta de origem, use um layout de projeto que faça sentido para as suas necessidades.

    
por 01.06.2014 / 14:36
fonte
-1

Se seu aplicativo precisar de várias declarações ng-app na mesma página, você precisará inicializar manualmente o módulo AngularJS, injetando um nome de módulo conforme mostrado abaixo:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Este plunker explica como podemos inicializar manualmente o AngularJS.

    
por 01.06.2014 / 09:10
fonte