A semente angular é o projeto vazio de fato para começar?

82

Depois de ter sido convencido a aprender e usar Angular.js, eu iria iniciar um aplicativo de IU da web concreto para lançar a roda de aprendizagem da experiência. (O aplicativo vai ser algum tipo de planejamento pessoal, para fazer lista, lembrete, técnica de pomodoro orientada, etc.

Um dos vídeos tutoriais que vi, do autor do Angular, é sobre as melhores práticas. E uma das melhores práticas é começar com o angular-seedprojeto.

Era isso que eu ia fazer, mas depois de pesquisar um pouco no Google, já existem pelo menos dois outros projetos que afirmam ser um bom ponto de partida:

  • angular-enterprise-seed
  • angular-sprout

Sou iniciante, mas gosto de investir no longo prazo. Devo me preocupar em usar algo diferente angular-seed? Acho que é muito cedo para me fazer essa pergunta, mas se já existem dois outros projetos, talvez haja alguns bons motivos.

Stephane Rolland
fonte
1
Acho que a conversa de 'melhores práticas' foi mais sobre o uso de modelos como um ponto de partida em geral, e não sobre alguns modelos específicos. Sim, angular-sprouttem algumas vantagens, mas na minha opinião, você pode usar angular-seedpara fins de aprendizagem muito bem.
raina77ow
Eu editei para remover a palavra templateda pergunta. Não, de fato, o autor insistiu em usar o angular-seed como ponto de partida, para construir o aplicativo em seu frame (é por isso que usei a palavra template, não no sentido de template html). Obrigado por apontar isso.
Stephane Rolland
angular-seeddeve funcionar bem. É realmente uma questão de preferência pessoal em como você deseja estruturar seu projeto. Se eu fosse sugerir uma ferramenta para usar, seria o yeoman . É ótimo para projetos angulares de andaimes e muito mais ...
Jonathan Palumbo
1
O link do seu vídeo tutorial pode estar quebrado.
JJ Zabkar 01 de
1
@JJZabkar corrigido, uma pena eu só vi seu comentário esta noite.
Stephane Rolland,

Respostas:

60

Descobri que, embora muitas pessoas usem vários projetos semente, o ponto de partida mais fácil e consistente para um aplicativo angular (ou qualquer aplicativo da web javascript) é o Yeoman .

Este aplicativo é uma ferramenta de scaffolding que permite que você especifique geradores que irão construir o kernel do seu aplicativo, completo com quaisquer bibliotecas que você deseja (via bower ) e um arquivo de construção grunt de trabalho (a maioria dos geradores vem com uma tarefa de construção, servidor tarefa para edição ao vivo e tarefa de teste)

Embora um aplicativo como este seja necessariamente opinativo, o andaime que ele produz ainda é muito genérico.

exemplo:

mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular
Ben Schwartz
fonte
8
Eu acredito que a linha 3 acima deveria ser npm install generator-angular.
Ryan Walls,
E linha 4: npm install generator-karma
Mattl
npm ERR! 404 'angular-generator' não está no registro npm.
mortsahl
grunt servepara vê-lo no navegador
jacktrades
1
Eu também tive que instalar o yo "npm install --global yo"
moke
26

Todos eles têm méritos diferentes, portanto, depende do que você está procurando fazer. Escrevi angular-enterprise-seed e posso falar sobre seus méritos relativos.

  1. É agnóstico em relação ao servidor. Isso é importante, pois um princípio fundamental do AngularJS, e uma das muitas coisas que o tornam atraente, é que ele segue o paradigma Client MVC. Isso significa que ele está totalmente desacoplado de toda e qualquer tecnologia de servidor. Muitas sementes existentes ligam o AngularJS a tecnologias de servidor, como angular-sprout (NodeJS) ou grilled-feta (Google App Engine / Java). No caso dos projetos acima mencionados, se os ambientes NodeJS e / ou Java ainda não estiverem em seu sistema, você terá que passar por vários obstáculos apenas para ver a semente surgir. Isso pode ser estranho para os desenvolvedores de PHP e Python, o que resulta na limitação da comunidade do projeto.

  2. Instalado e funcionando em segundos. Por ser agnóstico em relação ao servidor, ele pode ser executado em qualquer contêiner (que diabo, o sistema de arquivos). O método sugerido é executar "python -m SimpleHTTPServer" a partir do diretório raiz - vem nativo no Mac e Linux, portanto, não há etapas adicionais.

  3. Visualização ao vivo. É barato verificar o status do projeto porque uma versão ao vivo está sempre hospedada no github . Por ser agnóstico em relação ao servidor, isso é feito automaticamente copiando o master para o branch gh-pages de um cron job.

  4. Estilo rico. Inclui Twitter Bootstrap e LESS customizado / edificável pronto para usar, junto com Angular-UI, Angular-NG, fontes e uma miríade de outras ferramentas para fornecer recursos de estilo e capacidade de resposta ricos.

  5. Widgets. Assim como o Angular-Seed e o Angular-Sprout, o Angular-Enterprise-Seed exemplifica o layout de "melhores práticas", roteamento, etc. Mas também fornece uma série de componentes pré-construídos que podem ser retirados da prateleira e imediatamente reutilizados. Isso é um pouco difícil de fazer, pois pode exigir a convergência de várias tecnologias. Por exemplo, para criar o exemplo de grade, combinei os estilos angular-ui, angular-ng, angular-js e jquery. Existem exemplos de componentes para modais, paginação, alertas, grades e muito mais.

O Angular-seed é ótimo como um exercício acadêmico se você quiser aprender como as peças funcionam, mas vai deixá-lo ansioso por um ponto de partida mais substancial.

Não usei broto angular, então não posso falar sobre seus méritos. Talvez haja espaço para fundir o rebento angular e a semente da empresa angular?

Robert Christian
fonte
2
Se você quiser o acoplamento do servidor, consulte github.com/robertjchristian/service-nucleus , que integra o angular-enterprise-seed ao netflix-karyon e adiciona funcionalidades adicionais. Pronto fora da caixa para implantar e guerra. (Baseado em Java e inclui REST via Jersey).
Robert Christian
1
isso parece muito bom como base. Você já considerou a integração do bower para tornar mais fácil adicionar coisas como angular-ui-map etc?
Baldy de
1
@Baldy - Sim, gostaria de inserir o Bower no projeto. Você é voluntário? :)
Robert Christian
infelizmente não, mudei para outra coisa :)
Baldy
1
Você me convenceu com "sempre uma nova versão hospedada no github" ... e o link fornecido: robertjchristian.github.io/angular-enterprise-seed/# retorna uma página vazia.
cerd
18

Eu reconheço que esta é uma questão mais antiga, mas parece ter um bom número de pontos de vista, então faz sentido recomendar o que recentemente se tornou uma alternativa muito popular para Yeoman e angular-seed: ng-boilerplate . O ng-boilerplate difere do angular-seed porque foi projetado desde o início para aplicativos da web de grande produção e, portanto, é uma solução melhor do que o angular-seed na minha opinião.

Para explicar as diferenças entre os métodos Yeoman e ng-boilerplate de kickstart de aplicativo, citarei o criador do ngbp, Josh D. Miller :

Yeoman é incrível. Mas o problema que tenho com os geradores do AngularJS é que eles empacotam por camada, e não por recurso. Se armazenarmos todos os controladores em uma pasta "controladores" e todos os serviços em uma pasta "serviços", etc., e todos os nossos testes em outro lugar inteiramente, pode ser bastante desafiador reutilizar nossos componentes.

Esta também é uma boa discussão de Josh no fórum de problemas do gerador angular Yeoman, que vai mais a fundo em relação à configuração do ng-boilerplate vs. yeoman.

Mordred
fonte
10

Só para ficar claro, Yeoman não é um gerador. Yeoman é um formato / sistema para fazer geradores. Existem vários geradores feitos com Yeoman que você pode usar para gerar um aplicativo AngularJS. As pessoas muitas vezes se referem erroneamente a um ou outro deles como "o" gerador Yeoman. Mas existem muitos. Ainda está confuso? Yeoman não é o único sistema de fabricação de gerador. Brunch é outro.

Para responder à sua pergunta, aqui está uma comparação lado a lado muito abrangente de muitos geradores AngularJS que podem ser usados ​​para começar a fazer um aplicativo da web com AngularJS. Atualmente, ele contém mais de 200 aspectos diferentes dessas coisas. Um deles é o estilo de organização de arquivos. Assim, você pode ver facilmente quais organizam os arquivos por recurso, se isso for importante para você. É para mim.

Ainda há vários deles a serem adicionados. Os dois mencionados neste tópico são novos para mim. Mas essa comparação deve dar uma boa ideia das opções e como elas se comparam. Também é editável, portanto, se algum de vocês for especialista em alguma dessas coisas, sinta-se à vontade para compartilhar o que sabe.

Só Deus sabe por que as pessoas continuam fazendo mais e mais dessas coisas, em vez de apenas ajudar a melhorar as existentes. Se você tem alguma dúvida, eu adoraria ter esse mistério resolvido.

EDITAR: para obter acesso ao documento, peço que você preencha um questionário para compartilhar seu conhecimento sobre algo ou faça lobby com os especialistas para fazê-lo.

Vá aqui para fazer um questionário: http://www.dancancro.com/technology-questionnaires/

Dan Cancro
fonte
9

Eu gosto de usar Yeoman também. Experimente estes para obter um bom andaime:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt server                      # preview your app
grunt                             # build the application for deployment
dmackerman
fonte
Observe que este gerador agora é muito antigo, então não tenho certeza se eu o recomendaria mais.
dmackerman
Sim, mas encontre outro em yeoman.io/generators . Pesquisar angular / angular2
HankCa