He visto varios AngularJS plantillas de proyecto: el proyecto de semillas en el sitio web oficial, Yeoman‘s generados, y AngularFun.

Hay otros (onu)obstinado de plantillas debería echar un vistazo a, o relacionados con cualquier patrón que usted sugeriría para una solución escalable de AngularJS proyecto?

Por escalable me refiero a

  • ser capaz de dividir los controladores, directivas, filtros, etc. en sus propios archivos;
  • ser capaz de cargar estos archivos en la demanda, en lugar de hacer que el navegador carga de todo;
  • ser capaz de tener en común, de la cruz-los componentes del proyecto (por ejemplo, directrices comunes, filtros o servicios).
InformationsquelleAutor luisfarzati | 2012-11-23

6 Comentarios

  1. 30

    Usted puede echar un vistazo a una aplicación de demostración que Pawel Kozlowski y yo estamos preparando:
    https://github.com/angular-app/angular-app.

    No ofrece ningún soporte para la carga de archivos en la demanda, pero se puede ver que escupir módulos en los archivos y configurar las pruebas como un primer componente de clase. Tenemos un proceso de construcción (usando Grunt) que concatena (y minifies en prensa), js archivos y se puede ejecutar de la unidad y de extremo a extremo de las pruebas.

    Hemos elegido para dividir nuestros módulos en dos grupos funcionales de las áreas de aplicación común y transversal de la biblioteca de código, en lugar de una simple división en las directivas, de filtro, de servicios y así sucesivamente. En el lado de un área funcional podemos tener algunas de servicio, las directivas, los controladores y las plantillas.

    Esto hace que el desarrollo en contra de un área funcional más fácil ya que todos los elementos están en un solo lugar.

    El proyecto se basa en un sencillo servidor nodeJS para entregar los archivos (con soporte de HTML5 en modo deep linking) y también para proporcionar servicios de autenticación y autorización.

    • Como un comentario adicional: carga en la demanda no es muy bien apoyado en AngularJS en el momento como se explica aquí: stackoverflow.com/a/12646328/1418796
    • El proyecto ha sido muy útil, gracias! Me gustó la forma de dividir los módulos. Estoy usando Yeoman (basado en Grunt) y todavía estoy tratando con un par de cuestiones sobre el proceso de construcción, pero en general estoy de cierre para lograr un buen primer intento en esto!
  2. 8

    Yo diría que todos los puntos que pueden ser de fácil logrado, al menos sin ningún tipo de modificaciones a Angular.

    • ser capaz de dividir los controladores, directivas, filtros, etc. en sus propios archivos;

    esto puede ser, por supuesto, hecho con basic Angular, como se puede incluir muchas etiquetas de secuencia de comandos con los controladores/servicios como desee. Por supuesto, eso no se puede hacer nada, así que la mejor opción sería el uso de AMD los módulos, así como RequireJS. Esta es una de las semillas que tienen este tipo de configuración: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

    • ser capaz de cargar estos archivos en la demanda, en lugar de hacer que el navegador carga de todo;

    Como pkozlowski sugerido en los comentarios, ya existe y la entrada con alguna descripción del problema, usted verá que yo también estaba trabajando para resolver esto, y de hecho había algunos resultados. Tengo un ejemplo de trabajo de la carga de los controladores, plantillas y directrices sobre la demanda de uso de RequireJS y la resolver param de la ruta de configuración.

    • ser capaz de tener en común, de la cruz-los componentes del proyecto (por ejemplo, directrices comunes, filtros o servicios)

    Tener los puntos anteriores resuelto que podría ser fácilmente logrado utilizar RequireJs módulos.


    Me he estado preguntando si a partir de un agularjs-perezoso-proyecto de semillas sería una buena idea? ¿Hay alguna petición para que? Incluso podríamos ir más lejos y mover las rutas configuraciones fuera de la habitual configuración, digamos que usted tiene una de las vistas.archivo json (lo ideal es un servicio que responde con json) con las vistas que desee incluir en su aplicación:

    {
        "views" : {
            ....
            "account" : {             
                 "path" : "/account" //route path
                 "name" : "Account", //view name
                 "partial" : "views/account/account.html", //partial file
                 "controller" : "account/main" //RequireJS module
                 "directives" : [ "directives/version", "directives/menu" ] //directives used in the view
            }
            ....
        }
    }

    De esta manera usted puede:

    • desarrollar los puntos de vista en la separación y la construcción de la aplicación basada en este json bootstrap
    • tienen algunas directrices comunes y componentes
    • cuando bootstrap después de la sesión usted puede filtrar las opiniones que el usuario tiene permiso para ver
    • todo dentro de la ngView iba a ser cargado en la demanda

    Por supuesto, su aplicación debería ser muy grande, así que hacer todo este trabajo adicional, que haría de sentido 😉

    • En realidad, yo quería agregar algunos de estos, como un comentario a lo que pkozlowski escribió en la respuesta anterior, pero todavía no estoy permitido poner comentarios en todas partes;)
    • podría publicar algo más de información acerca de la demanda de carga de las directivas con AngularJS? Que yo sepa no es posible, sin realmente desagradable trucos.
    • Por supuesto, he logrado hacerlo manteniendo la referencia de $compileProvider hasta que yo llegue a la directiva módulo cargado, el código está aquí: github.com/matys84pl/angularjs-requirejs-lazy-controllers/blob/… . También echa un vistazo a la route-congif.js – esto es donde yo lo uso. Estoy de carga de todos los 3 archivos (parcial, controlador y directivas) en paralelo.
    • Muy completa la respuesta, gracias! Parece que debo leer más acerca de RequireJS. No creo que mi proyecto es que grande todavía como para involucrar a esta complejidad, pero creo que voy a tener que volver a este en el mediano plazo. 🙂
    • Eres bienvenido. Me alegro de que yo era capaz de ayudar.
    • FWIW, me gustaría ver en demanda de carga de puntos de vista, los componentes sólo por «lo que el usuario está permitido ver» caso). Así que sí, si tienes tiempo, el código de un ejemplo…

  3. 4

    Estoy de acuerdo con los puntos que otras personas han dicho hasta ahora; es muy fácil de dividir las cosas en módulos independientes y tienen los módulos dependen unos de otros con regular AngularJS cosas. Entonces su código JS se puede dividir en los archivos y árboles de directorios que usted prefiera.

    Sólo pensé que mencionar lo que estamos haciendo en el open source hawtio proyecto que se basa en AngularJS. Hemos tomado la modularidad para un poco de un extremo 🙂 hawtio utiliza plugins que puede ser descubierto en tiempo de ejecución en el servidor en ejecución (por ejemplo, implementar y anular la implementación de funciones de interfaz de usuario en tiempo de ejecución). Así que basado en algunas RESTO de consulta o JMX detección de podemos de forma dinámica y o quitar complementos.

    por ejemplo, aquí están todos nuestros predeterminado actual plugins

    En términos de diseño, cada plugin tiene sus propios directorios de código (js), html parciales (html) y cualquier otra cosa (por ejemplo css /img directorios) que hace que sea fácil mantener las cosas agradables y modular. por ejemplo, aquí está el camello plugin que tiene su propio código html, js y carpetas img.

    A continuación, un plugin específico define su propia AngularJS módulo, las directivas, los filtros y que luego pueden depender de otros módulos.

    No hemos llegado con terriblemente útiles convenciones de nomenclatura para los archivos de origen hasta el momento, sin embargo,:). Nos encontramos con la escritura de un archivo por controlador parece más simple; pero aparte de la fooPlugin.archivo ts y los ayudantes.archivo ts (para módulo específico de funciones auxiliares) todavía no hemos encontrado ningún otro significativo convenciones de nomenclatura hasta el momento.

  4. 1

    Este proyecto suena prometedor http://vesparny.github.io/ng-kickstart

    Que le hace capaz de dividir su base por su característica y mantener su código reutilizable, así como livereloading gracias personalizado para un Gruñido, tarea para la que.

    El proyecto es también la unidad de pruebas orientadas y viene con una costumbre «dist tarea» que le permiten crear un optimizado, la producción de preparados de liberación.

  5. 1

    Advertencia: enchufe Descarado.

    Definitivamente, usted debe comprobar fuera de generador-angular-xl.

    Que apunta especialmente a la creación a gran escala de AngularJS aplicaciones de código de agrupación lógicamente, el andamiaje de la unidad de pruebas, y automáticamente la inyección de tus archivos js y css en index.html etc. También ayuda a crear un simulacro de back-end para sus datos, de manera efectiva, lo que es una buena elección cuando el desarrollo de prototipos que también puede vivir en convertirse por completo de aplicaciones. NO generan código back-end, por lo que son libres para elegir lo que sea de back-end de la tecnología que desee.

Dejar respuesta

Please enter your comment!
Please enter your name here