An application developer spends most of his time to write code. It is best practice to structure the directory in a way that helps the developer to write code rapidly. It is important to structure the AngularJS controllers, directives, filters, and so on in separate JavaScript files. You can get more information about the AngularJS coding style at following links:
Most of the times, the structure of the application is defined by the way in which the files are organized in the project. AngularJS does not describe a certain directory structure; there are three different commonly used patterns to organize AngularJS code.
In this technique, the project contains the following directory structure:
ProjectName
CSS
Images
JS
app.js
controller.js
directive.js
filters.js
services.js
HTMLS
In this type of directory structure, we have a subdirectory for each type for example. We keep all the cascaded style sheet files in CSS, all image in images folder, and so on. The JavaScript (JS) subdirectory has one JavaScript file of each AngularJS object type. In case of a large project where we have a large number of controllers or services, it will be hard to find files.
In this type of code structure, we will organize our AngularJS code in the subdirectories instead of a single file. We will create different subdirectories for different AngularJS objects, shown as follows:
ProjectName
CSS
Images
JS
app.js
controllers
ctrlLogin.js
ctrlRegistration.js
ctrlCustomer.js
directives
filters
services
HTMLS
In this kind of organization, it is easy to locate the file using the file tree. Also, it will be easy to identify which file to modify in the source control.
This type of code organization is useful if we need to reuse the controllers, directive, filters, and services in other projects. It is best practice to arrange all files according to the category, shown as follows:
ProjectName
CSS
Images
JS
app.js
authentication
ctrlLogin.js
ctrlRegistration.js
ctrlLogout.js
srcAuthentication
customers
ctrlGetCustomer.js
ctrlUpdateCustomer.js
customerFilter.js
HTMLS
With this structure, any developer can now open the top-level folder and immediately get insight into the project as to what it can do and find out which project to undertake.
In each and every project, there is some common code that is used by other modules in the application. Follow the given best practices for the common code in the project:
$rootScope
; in this way, they can be used by child scopes. This technique will avoid the use of same dependency in each controller in the application.$emit
, $broadcast
, and $on
methods on the scope, which will help to decouple two components that need explicit reference to one another.The following are best practices of how to use the AngularJS framework:
<script>
tag, which includes all AngularJS JavaScript files at the bottom of the page to improve the load time.$scope
directive and one or two behaviors. Avoid using the controller to do the following:ctrl
with the controller.