Configuração sugerida para o desenvolvimento de angularJS no Visual Studio 2013 [fechado]

9

Estou começando com AngularJS. O back-end será a API da Web (que também é nova para mim) e eu gostaria de usar apenas um IDE, então estou tentando descobrir como configurar um projeto no Visual Studio 2013 para AngularJS. Eu gostaria de mantê-lo como um projeto separado, para mantê-lo fracamente acoplado à API (ou manter a interface do usuário dissociada da API da Web). Estou tendo dificuldades para descobrir como obter essa configuração. Assim....

  • Que tipo de projeto é melhor para um projeto AngularJS puro (HTML 5 puro)?
  • É sugerido o uso do Grunt? Ou o MS Build é melhor para lidar com tarefas de compilação? Estou pensando aqui, linting, minify, concatenando arquivos em um único arquivo de distribuição, talvez copiando para um servidor web.
  • Como você executa testes? Existe um plugin para executar testes Jasmin? Você acabou de executar o Karma separadamente?
  • Existem bons modelos para o AngularJS? Alguém que usa ngBoilerplate?

Qualquer ajuda seria apreciada.

visual-studio html5 angularjs Greg McGuffey
fonte
meta.programmers.stackexchange.com/questions/6483/...
mosquito
6
Eu tenho um problema com isso sendo considerado muito amplo. Estou meio perdido com relação a esse assunto e, portanto, é extremamente difícil me concentrar mais na minha pergunta. Então, eu realmente não sei como fazer uma pergunta mais específica neste momento. Quanto mais eu google isso, mais confuso eu fico ... :(
Greg McGuffey
1
Eu estava procurando uma resposta simples para a mesma pergunta. Talvez a única maneira seja simplificar completamente a questão. Vou adicionar uma pergunta mais simples e me referir a esta.
Amelvin
2
Não concordo com a ideia de que esta questão seja muito ampla. Coloque dois programadores na mesma sala e eles teriam uma pergunta semelhante. Na verdade, tenho a mesma pergunta exata, pois estamos prestes a iniciar um aplicativo Web usando a (s) mesma (s) estrutura (s).
beaudetious

Respostas:

7

Tivemos as mesmas escolhas a fazer.

Nós decidimos :

  • faça com que todo o processo de criação não dependa do visual studio. Escolhemos o uso de ferramentas consideradas mainstream no mundo do desenvolvimento angular. Dessa forma, obter apoio da comunidade é mais fácil.

  • use extensões do visual studio, quando disponíveis, para aprimorar a experiência sempre que possível

Como :

  • use grunte karma. Desenvolvemos um projeto usando o andaime yeoman angulare o usamos como modelo para configurar nosso próprio processo de criação. O nosso é quase como está.

  • instale a extensão do Web Essentials 2013 . A extensão usa o mesmo .jscse .jshintrcque sua gruntcompilação usa. Decidimos deixar a extensão Web Essentials 2013 manipular os .lessarquivos ao salvar, para que eles index.htmlpossam se referir main.csse nenhum processo de compilação seja necessário.

  • certificar-se de nossas configurações do editor visual studio estão alinhados com os nossos .jscse .jshintrcformatação regras (espaçamento, de fim de linha, etc).

Além disso:

  • nós executamos karma watch(ou grunt watch) na linha de comando para nossos testes.

  • anexar à execução de testes de carma do visual studio funciona bem, você deve executar seus testes com o IE. Mas usamos as ferramentas de desenvolvimento do Chrome com mais frequência.

  • nós não usamos o jasmine web runner. carma tem tudo que você precisa.

  • para facilitar as coisas, nossos arquivos de aplicativos estão em / static / dentro de nosso projeto WebAPI. Dessa forma, você não precisa de outro servidor para servir seus arquivos estáticos.

  • você pode usar o NTVS para depurar gruntou karmaqualquer outra ferramenta incluída no processo de criação, no Visual Studio.

  • a integração com nosso IC (CCNet) era simples, basta invocar grunt cionde ciestá uma tarefa que faz a compilação e, em seguida, executar os testes usando repórteres no estilo junit em vez de repórteres do tipo console.

  • também garantimos que a execução do processo de compilação seja opcional. O processo de compilação agrupa coisas em uma distpasta. jsExecutamos testes integrados nessa pasta, mas no momento do desenvolvimento, executamos em arquivos brutos (não minificados ou concatenados). O yeoman angularmodelo nos levou até lá facilmente.

Eu espero que isso ajude

Sly
fonte
Obrigado! Isso ajuda muito. Uma pergunta de acompanhamento: Eu suponho que você use o MS Build para a parte da API da Web e execute o grunt para a interface do usuário (na pasta / static /), certo?
Greg McGuffey
A única coisa que ainda não sei é que tipo de projeto usar se eu quisesse separar a interface do usuário do AngularJS da API da Web. Eu entendo que você os reúne, estou apenas pensando em como fazê-lo, se não os quero juntos, se você tem alguma idéia sobre isso.
Greg McGuffey
Para o seu primeiro comentário: sim. Para o seu segundo: colocamos eles no projeto WebAPI apenas em nosso ambiente de desenvolvimento. No momento da implantação, eles são implantados em outro lugar. Se você não escolher um tipo de projeto da Web , os recursos do VS específicos para projetos da Web não funcionarão (vá para Definição em um arquivo javascript, por exemplo).
Sly
Opção1: você pode usar um projeto em branco do ASP.Net MVC, excluir dependências e ficará bem. A única coisa é que a execução deste projeto compilará um /bin/project.dllque não faz nada.
Sly
Opção 2: Crie um novo projeto Node.js. no VS (requer NTVS), ele possui seu próprio servidor web (no nodejs) que servirá seus arquivos estáticos. Eu testei e funciona.
Sly