Configuración sugerida para el desarrollo angularJS en Visual Studio 2013 [cerrado]

9

Estoy empezando con AngularJS. El back-end será Web API (que también es nuevo para mí) y me gustaría usar solo un IDE, así que estoy tratando de descubrir cómo configurar un proyecto en Visual Studio 2013 para AngularJS. Me gustaría mantenerlo como un proyecto separado, para mantenerlo acoplado libremente a la API (o mantener la interfaz de usuario desacoplada de la API web). Me está costando mucho descubrir cómo obtener esta configuración. Entonces....

  • ¿Qué tipo de proyecto es mejor para un proyecto AngularJS puro (HTML 5 puro)?
  • ¿Se sugiere usar Grunt? ¿O es MS Build mejor para manejar las tareas de construcción? Pienso aquí alinear, minificar, concatenar archivos en un solo archivo de distribución, tal vez copiarlo en un servidor web.
  • ¿Cómo se ejecutan las pruebas? ¿Hay un complemento para ejecutar las pruebas de Jasmin? ¿Simplemente ejecutas Karma por separado?
  • ¿Hay alguna buena plantilla para AngularJS? ¿Alguno que use ngBoilerplate?

Cualquier ayuda sería apreciada.

visual-studio html5 angularjs Greg McGuffey
fuente
meta.programmers.stackexchange.com/questions/6483/…
mosquito
66
Tengo un pequeño problema con que esto se considere demasiado amplio. Estoy un poco perdido con respecto a este tema y, por lo tanto, es extremadamente difícil concentrarse más en mi pregunta. Entonces, realmente no sé cómo hacer una pregunta más específica en este momento. Cuanto más busco en Google, más confundido me pongo ... :(
Greg McGuffey
1
Estaba buscando una respuesta simple a la misma pregunta. Quizás la única forma es simplificar completamente la pregunta. Agregaré una pregunta más simple y me referiré a esta.
amelvin
2
No estoy de acuerdo con la idea de que esta pregunta sea demasiado amplia. Consigue dos programadores en la misma habitación y harían una pregunta similar. De hecho, tengo la misma pregunta exacta ya que estamos a punto de iniciar una aplicación web utilizando los mismos marcos.
beaudetious

Respuestas:

7

Teníamos las mismas elecciones que hacer.

Decidimos :

  • hacer que todo el proceso de construcción no dependa del estudio visual. Elegimos utilizar herramientas que se consideran convencionales en el mundo del desarrollo angular. De esta forma, obtener el apoyo de la comunidad es más fácil.

  • use extensiones de Visual Studio cuando estén disponibles para mejorar la experiencia cuando sea posible

Cómo :

  • uso grunty karma. Andamiamos un proyecto usando yeoman angulary lo usamos como plantilla para configurar nuestro propio proceso de construcción. El nuestro es casi como es.

  • instale la extensión Web Essentials 2013 . La extensión usa lo mismo .jscsy .jshintrcque tu gruntconstrucción usa. Decidimos permitir que la extensión de Web Essentials 2013 maneje los .lessarchivos guardados para que index.htmlpuedan referirse main.cssy no se requiera ningún proceso de compilación.

  • asegurarse de que nuestros ajustes del editor de Visual Studio están alineados con nuestros .jscsy .jshintrcde reglas de formato (espaciado de final de línea, etc.).

También:

  • ejecutamos karma watch(o grunt watch) en la línea de comandos para nuestras pruebas.

  • adjuntar para ejecutar pruebas de karma desde Visual Studio funciona bien, tienes que ejecutar tus pruebas con IE. Pero usamos las herramientas de desarrollo de Chrome la mayoría de las veces.

  • no usamos el corredor web jazmín en absoluto. El karma tiene todo lo que necesitas.

  • para facilitar las cosas, nuestros archivos de aplicaciones están en / static / dentro de nuestro proyecto WebAPI. De esta manera, no necesita otro servidor para servir sus archivos estáticos.

  • puede usar NTVS para depurar grunto karmacualquier otra herramienta incluida en su proceso de compilación, desde Visual Studio.

  • La integración con nuestro CI (CCNet) fue simple, simplemente invoque grunt cidónde cies una tarea que realiza la compilación y luego ejecuta las pruebas utilizando reporteros de estilo junit en lugar de reporteros tipo consola.

  • También nos aseguramos de que ejecutar el proceso de compilación sea opcional. El proceso de compilación agrupa cosas en una distcarpeta. jsEjecutamos pruebas integradas en esta carpeta, pero en el momento del desarrollo, corremos en archivos sin formato (no minificados ni concatenados). La yeoman angularplantilla nos llevó allí fácilmente.

espero que esto ayude

Astuto
fuente
¡Gracias! Esto ayuda mucho. Una pregunta de seguimiento: supongo que usa MS Build para la parte de la API web, luego ejecuta gruñido para la interfaz de usuario (en / static / folder), ¿verdad?
Greg McGuffey
Lo único que aún no tengo claro es qué tipo de proyecto usar si quisiera separar la interfaz de usuario de AngularJS de la API web. Entiendo que los hayas reunido, me pregunto cómo hacerlo si no los quiero juntos, si tienes alguna idea al respecto.
Greg McGuffey
A su primer comentario: sí. A su 2do: Los colocamos en el proyecto WebAPI solo en nuestro entorno de desarrollo. En el momento del despliegue se despliegan en otro lugar. Si no elige un tipo de proyecto web , las funciones VS específicas de los proyectos web no funcionarán (vaya a Definición en un archivo javascript, por ejemplo).
Sly
Opción 1: podría usar un proyecto ASP.Net MVC en blanco, eliminar dependencias y estaría bien. Lo único es que ejecutar este proyecto compilará uno /bin/project.dllque no hace nada.
Sly
Opción 2: Cree un nuevo proyecto Node.js en VS (requiere NTVS), tiene su propio servidor web (en nodejs) que servirá sus archivos estáticos. Lo probé y funciona.
Sly