javascript - descargar - ng-app que es
Estructura de archivos de aplicación AngularJS (6)
En una aplicación AngularJS grande que tiene todos mis controladores en un solo archivo "controllers.js" me parece un poco imposible de mantener. ¿Hay una mejor manera de hacerlo, como por ejemplo:
/js/controllers/myController.js
/js/controllers/yourController.js
/js/controllers/ourController.js
Y eso también se aplica a filtros, servicios, directivas, etc ...
Comprueba esto, crea tu aplicación angular con CoffeeScript, SCSS.
Es posible que desee echarle un vistazo a esta guía impulsada por la comunidad .
La guía describe las mejores prácticas para organizar la estructura de directorios de una aplicación AngularJS grande.
También hace recomendaciones para nombrar y estructurar módulos AngularJS, controladores, directivas, filtros y servicios.
También vale la pena revisar una herramienta como Lineman.js con la plantilla de aplicación AngularJS .
Para proyectos empresariales de AngularJS, es posible que desee ver este kickstarter que se basa en ng-boilerplate .
Hay muchas maneras de organizar su código. Puedes mirar en los siguientes enlaces.
- Creación de aplicaciones Huuuuuge con AngularJS
- Organización de código en aplicaciones AngularJS y JavaScript grandes
- Las mejores prácticas de AngularJS: Estructura de directorios
Puedes seguir su estándar o puedes hacer el tuyo.
Trate de seguir las siguientes pautas:
- Los controladores no deben ser demasiado largos, si es demasiado largo, se manejan múltiples responsabilidades
- Intenta usar Directivas y Servicios en tu sistema para reutilizar tu código / lógica
- Las directivas son las cosas más poderosas en Angualrjs, trate de obtener la máxima ventaja de ello.
- Escribir pruebas; aún mejor puedes intentar practicar TDD con AngularJS
Hay un buen documento del propio equipo de Google que respalda el ejemplo de Shivali: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Algo como esto:
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
Puedes manejarlo como módulo sabio !!
Por ejemplo, tome la vista de usuario, haga un directorio, ¡aquí su nombre es usuario!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
¡¡Espero que esto te ayudará!!
Vea cómo estos dos proyectos de inicio organizan archivos para una aplicación de mayor escala: