¿Es angular-seed el proyecto vacío de facto para empezar?

82

Después de haberme convencido de aprender y usar Angular.js, iba a iniciar una aplicación de interfaz de usuario web concreta para lanzar la rueda de aprendizaje de la experiencia. (La aplicación va a ser una especie de planificación personal, lista de tareas, recordatorio, orientada a la técnica pomodoro, etc.)

Uno de los videos tutoriales que he visto, del autor de Angular, trata sobre las mejores prácticas. Y una de las mejores prácticas es comenzar con el angular-seedproyecto.

Eso es lo que iba a hacer, pero después de buscar un poco en Google, ya hay al menos otros dos proyectos que dicen ser el buen punto de partida:

  • angular-enterprise-seed
  • angular-sprout

Soy principiante, pero me gusta invertir a largo plazo. ¿Debería preocuparme por usar algo más que angular-seed? Siento que es demasiado pronto para hacerme esta pregunta, pero si ya hay otros dos proyectos, tal vez haya algunas buenas razones.

Stephane Rolland
fuente
1
Creo que la charla sobre las "mejores prácticas" se centró más en el uso de plantillas como punto de partida en general, y no en una plantilla específica. Sí, angular-sprouttiene algunas ventajas, pero en mi opinión, puedes usarlo angular-seedcon fines de aprendizaje sin problemas.
raina77ow
Edité para eliminar la palabra templatede la pregunta. No, de hecho, el autor insistió en usar angular-seed como un comienzo, para construir la aplicación en su marco (es por eso que usé la plantilla de palabras, no en el sentido de plantilla html). Gracias por señalar eso.
Stephane Rolland
angular-seeddebería funcionar bien. Es realmente una cuestión de preferencia personal en cómo desea estructurar su proyecto. Si fuera a sugerir una herramienta para usar, sería un granjero . Es ideal para proyectos angulares de andamios y más ...
Jonathan Palumbo
1
Es posible que el enlace del video del tutorial esté roto.
JJ Zabkar
1
@JJZabkar corrigió, lástima que solo vi tu comentario esta noche.
Stephane Rolland

Respuestas:

60

Descubrí que, aunque muchas personas usan varios proyectos semilla, el punto de partida más fácil y consistente para una aplicación angular (o cualquier aplicación web javascript) es Yeoman .

Esta aplicación es una herramienta de andamiaje que le permite especificar los generadores que construirá el hasta el núcleo de su aplicación, completas con cualquier bibliotecas que desee (a través de Bower ) y un trabajo ronco fichero de construcción (la mayoría de los generadores vienen de valores con una tarea de construcción, el servidor tarea para edición en vivo y tarea de prueba)

Aunque una aplicación como esta es necesariamente obstinada, el andamiaje que produce sigue siendo muy genérico.

ejemplo:

mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular
ben Schwartz
fuente
8
Creo que la línea 3 anterior debería ser npm install generator-angular.
Ryan Walls
Y línea 4: npm install generator-karma
Mattl
npm ERR! 404 'angular-generator' no está en el registro npm.
mortsahl
grunt servepara verlo en el navegador
jacktrades
1
También tuve que instalar yo "npm install --global yo"
moke
26

Todos tienen diferentes méritos, por lo que depende de lo que estés buscando hacer. Escribí angular-enterprise-seed y puedo hablar de sus méritos relativos.

  1. Es independiente del servidor. Esto es importante ya que un principio básico de AngularJS, y una de las muchas cosas que lo hacen atractivo, es que sigue el paradigma Client MVC. Esto significa que está completamente desacoplado de todas y cada una de las tecnologías de servidor. Muchas semillas existentes vinculan AngularJS a tecnologías de servidor, como angular- sprout (NodeJS) o grilled-feta (Google App Engine / Java). En el caso de los proyectos mencionados anteriormente, si los entornos NodeJS y / o Java aún no están en su sistema, tendrá que pasar por varios aros solo para ver aparecer la semilla. Esto puede resultar ajeno a los desarrolladores de PHP y Python, lo que limita la comunidad del proyecto.

  2. En funcionamiento en segundos. Debido a que es independiente del servidor, se puede ejecutar en cualquier contenedor (para el caso, verifique el sistema de archivos). El método sugerido es ejecutar "python -m SimpleHTTPServer" desde el directorio raíz; esto es nativo en Mac y Linux, por lo que no hay pasos adicionales.

  3. Vista previa en vivo. Es barato verificar el estado del proyecto porque una versión en vivo siempre está alojada en github . Debido a que es independiente del servidor, esto se hace automáticamente copiando master a la rama gh-pages desde un trabajo cron.

  4. Estilo rico. Incluye Twitter Bootstrap y LESS personalizado / compilable listo para usar, junto con Angular-UI, Angular-NG, fuentes y una miríada de otras herramientas para proporcionar un estilo rico y capacidades de respuesta.

  5. Widgets. Al igual que Angular-Seed y Angular-Sprout, Angular-Enterprise-Seed ejemplifica el diseño, el enrutamiento, etc. de "mejores prácticas". Pero también proporciona una gran cantidad de componentes prediseñados que se pueden sacar del estante y reutilizar inmediatamente. Esto es un poco difícil de hacer, ya que puede requerir la convergencia de varias tecnologías. Por ejemplo, para crear el ejemplo de cuadrícula, combiné los estilos angular-ui, angular-ng, angular-js y jquery. Hay ejemplos de componentes para modales, paginación, alertas, cuadrículas y más.

Angular-seed es excelente como ejercicio académico si desea aprender cómo funcionan las piezas, pero lo dejará anhelando un punto de partida más sustancial.

No he usado angular-sprout, así que no puedo hablar de sus méritos. ¿Quizás haya espacio para fusionar el brote angular y la semilla empresarial angular?

Robert Christian
fuente
2
Si desea el acoplamiento de servidores, consulte github.com/robertjchristian/service-nucleus , que integra angular-enterprise-seed con netflix-karyon y agrega funcionalidad adicional. Listo de fábrica para el despliegue y la guerra. (Basado en Java e incluye REST a través de Jersey).
Robert Christian
1
esto se ve muy bien como base. ¿Ha considerado integrar bower para facilitar la adición de cosas como angular-ui-map, etc.?
Baldy
1
@Baldy: Sí, me gustaría incluir a Bower en el proyecto. ¿Eres voluntario? :)
Robert Christian
desafortunadamente no, me mudé a otra cosa :)
Baldy
1
Me convenciste con "siempre una versión nueva alojada en github" ... y luego el enlace proporcionado: robertjchristian.github.io/angular-enterprise-seed/# devuelve una página vacía.
cerd
18

Reconozco que esta es una pregunta anterior, pero parece tener un buen número de vistas, por lo que tiene sentido recomendar lo que recientemente se ha convertido en una alternativa muy popular tanto a Yeoman como a angular-seed: ng-boilerplate . ng-boilerplate se diferencia de angular-seed en que está diseñado desde cero para aplicaciones web de gran producción y, por lo tanto, es una mejor solución que angular-seed en mi opinión.

Para explicar las diferencias entre los métodos Yeoman y ng-boilerplate de kickstarting de aplicaciones, citaré al creador de ngbp, Josh D. Miller :

Yeoman es asombroso. Pero el problema que tengo con los generadores de AngularJS es que se empaquetan por capa en lugar de por característica. Si almacenamos todos los controladores en una carpeta de "controladores" y todos los servicios en una carpeta de "servicios", etc., y todas nuestras pruebas en otro lugar por completo, reutilizar nuestros componentes puede resultar bastante difícil.

Esta también es una discusión bastante buena de Josh en el foro de problemas del generador angular de Yeoman, que profundiza más en la configuración de ng-boilerplate vs. yeoman.

Mordred
fuente
10

Para ser claros, Yeoman no es un generador. Yeoman es un formato / sistema para hacer generadores. Hay varios generadores hechos con Yeoman que puede usar para generar una aplicación AngularJS. La gente a menudo se refiere erróneamente a uno u otro de ellos como "el" generador Yeoman. Pero hay muchos. ¿Confundido todavía? Yeoman no es el único sistema de fabricación de generadores. El brunch es otro.

Para responder a su pregunta, aquí hay una comparación lado a lado muy completa de muchos generadores AngularJS que se pueden usar para comenzar a crear una aplicación web con AngularJS. Actualmente, contiene más de 200 aspectos diferentes de estas cosas. Uno de ellos es el estilo de organización de archivos. Para que pueda ver fácilmente cuáles organizan los archivos por función si eso es importante para usted. Lo es para mi.

Todavía quedan varios por agregar. Los dos mencionados en este hilo son nuevos para mí. Pero esta comparación debería darle una buena idea de las opciones y cómo se comparan. También es editable, por lo que si alguno de ustedes es experto en alguna de estas cosas, no dude en compartir lo que sabe.

Solo Dios sabe por qué la gente sigue haciendo más y más de estas cosas en lugar de simplemente ayudar a mejorar las existentes. Si tiene alguna conjetura, me encantaría resolver ese misterio.

EDITAR: para obtener acceso al documento, le pido que complete un cuestionario para compartir su conocimiento de algo o presione a los expertos para que lo hagan.

Vaya aquí para hacer un cuestionario: http://www.dancancro.com/technology-questionnaires/

Dan Cancro
fuente
9

También me gusta usar Yeoman. Pruebe estos para obtener un buen andamio:

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
fuente
Solo tenga en cuenta que este generador ahora es bastante antiguo, por lo que no estoy seguro de que lo recomiende más.
dmackerman
Sí, pero busca otro en yeoman.io/generators . Buscar angular / angular2
HankCa