Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS application file structure

On a large AngularJS application having all my controllers in a single "controllers.js" file seems a little un-maintainable to me. Is there a better way to do this such as:

\js\controllers\myController.js \js\controllers\yourController.js \js\controllers\ourController.js 

and that also applies for filters, services, directives etc...

like image 760
AndrewMcLagan Avatar asked Jul 04 '13 03:07

AndrewMcLagan


People also ask

What is the structure of Angular?

The main building blocks of Angular are modules, components, metadata, templates, data binding, services, directives, and dependency injection.

What is the file extension for AngularJS?

js file. Now you need to download a copy of angular. js file to your computer and replaces the CDN link in the head with the link to the file you downloaded.

In which folder are the most important files stored in AngularJS?

top-level “app” folder : all angular files should be placed within a folder that could be named as “app”. “app” is the top-level folder. app/components folder: one or more components can be placed within “app/components” folder.

What is AngularJS architecture?

It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns.


1 Answers

There are lot's of ways to organize your code. You can look in the following links

  • Building Huuuuuge Apps with AngularJS
  • Code Organization in Large AngularJS and JavaScript Applications
  • AngularJS Best Practices: Directory Structure

You can follow their standard or you can make your own.

Try to follow the following guidelines:

  • Contollers shouldn't be too long, if it's too long then it is handling multiple responsibilities
  • Try to use Directives and Services in your system to reuse your code/logic
  • Directives are the most powerful things in Angualrjs, try to get maximum advantage of it.
  • Write Tests; even better you can try to practice TDD with AngularJS
like image 99
Imrul Avatar answered Sep 27 '22 21:09

Imrul