angularjs - page - Cómo construir múltiples aplicaciones desde una sola base de código en Angular

router angular navigationend

Question

Estoy trabajando en una aplicación angular. Basamos nuestra aplicación en https://github.com/Swiip/generator-gulp-angular y todo funciona bien. Este proyecto de semilla angular básicamente escanea todos sus archivos JS en un directorio y los acumula en un solo archivo JS cuando entra en producción.

Estamos creando un backend de administración para un sistema de facturación. El cliente ahora también quiere un "backend público" para todos sus clientes. Un lugar donde los clientes e iniciar sesión y enviar mensajes básicamente. La UI es la misma para el backend público, podríamos reutilizar las mismas directivas en todas partes. El único problema es que el backend público es pequeño y el backend de administración es enorme. No creo que servir la aplicación de administración completa a un cliente aleatorio sea una buena práctica.

¿Cómo hago para construir dos aplicaciones desde el mismo código base?

Answer 1

No estoy de acuerdo con las opciones presentadas aquí. La idea de dividir mi código base en 3 proyectos diferentes sería factible si estuviera construyendo componentes reutilizables. Pero solo estoy dividiendo mi aplicación. Estas piezas no se reutilizarán en ninguno de mis otros proyectos, ya que son específicos del proyecto.

La sobrecarga de mantener 3 proyectos diferentes (dependencias, construcción, documentación, liberación, control de versiones) no vale la pena.

Creo que mirar las importaciones de ES6 (con Webpack o System.js) o RequireJS es una opción mucho mejor, sin embargo, no sé cómo funcionarán en el ecosistema Angular1.X.

Answer 2

No sirvas dos aplicaciones desde el mismo código base. Esa es una receta para el desastre. Este es un resumen aproximado de cómo manejaría esto:

1. Audita la aplicación que ya has construido. Identifique qué componentes son reutilizables entre los dos proyectos y establezca eso como su proyecto base.
2. Si construyes cosas teniendo en cuenta la modularidad, esto no debería ser una frenada hacia atrás. Es posible que necesite refactorizar para colocarse en la posición correcta. Angular Styleguide de John Papa sería un gran lugar para ayudar en ese frente (ha sido genial como he aprendido Angular).
3. Convierta ese proyecto de front-end base en una dependencia de bower que podría actualizarse independientemente de su código de aplicación personalizado. Más sobre la creación de un paquete Bower aquí . Tal vez podrías incluso abrir el código fuente de lo que has construido?
4. Cree funcionalidades personalizadas sobre su base modular. Cada grupo de funcionalidad personalizada sería una de sus aplicaciones (en su caso, eso suena como un panel de administración y una aplicación pública).
5. Después del lanzamiento, puede administrar las aplicaciones con un equipo de producto si son casi iguales. Identifique qué funciones son comunes, compártalas en la aplicación base e implemente esos cambios a través de sus dos aplicaciones personalizadas. Agregue funcionalidad personalizada por proyecto; Si las bases de código divergen lo suficiente, podría separar esto en dos equipos de productos.

Como lo señalaron otros, administraría las aplicaciones con una buena herramienta de compilación como Grunt / Gulp, que se encargaría de las dependencias comunes para usted.

Answer 3

También tendría que estar en desacuerdo con la respuesta aceptada. Mantener una base de código es significativamente más sencillo y requiere menos tiempo, y será favorable en caso de que su proyecto se expanda a un número aún mayor de aplicaciones que se deben implementar y construir de manera independiente.

Definiendo la compilación

Habría un archivo app.js por aplicación, que definiera de qué componentes se importarán y se construirá. La estructura podría verse similar a la siguiente:

components
-- component-1
-- component-2
-- component-3
app-1
-- app.js
app-2
-- app.js

Para construir app-1, necesitamos los componentes 1 y 3, por lo que en app-1 / app.js definiríamos:

require(''../components/component-1/file.js'')
require(''../components/component-3/file.js'')

Si desea implementar configuraciones relacionadas con el usuario por separado, puede crear el módulo UserSettings, con sus propias rutas, e incluir los componentes que este módulo necesita. Este módulo se incluiría en la compilación de su aplicación. Lo mismo podría aplicarse a las rutas, configuración, ejecuciones, etc. - óptimamente, todos estos pertenecen a un módulo o componente.

Dependencias

En algún momento se enfrentará a la pregunta de si desea agrupar dependencias para todas las aplicaciones de una sola vez, o crear un paquete para cada aplicación por separado. La única solución que encontré hasta ahora, es curar la lista manual de dependencias para cada aplicación y ejecutar un agrupador basado en esa lista, pero estoy seguro de que hay una mejor manera.