[ad_1]
AngularJS Best Practices: A Modularized Directory Structure
As developers, we spend a lot of time writing code. In the early stages of a project, the directory structure may not seem important, and many of us tend to ignore best practices. However, in the long run, this can greatly impact the maintainability of our code. With AngularJS, a relatively new framework, developers are still figuring out what works and what doesn’t. In this article, we will cover best practices for directory structures in both small and large AngularJS apps.
What Not to Do
First, let’s go over what not to do. Many AngularJS tutorials show an app structure that resembles the following:
app/
controllers/
mainController.js
otherController.js
directives/
mainDirective.js
otherDirective.js
services/
userService.js
itemService.js
js/
bootstrap.js
jquery.js
app.js
views/
mainView.html
otherView.html
index.html
This may seem like a logical structure, and it is similar to many MVC frameworks. However, the main problem with this structure becomes apparent when the app grows in size. As we add more controllers, views, and directives, we end up with a lot of scrolling to find the required files. For example, imagine building a blog with AngularJS. If we want to add the author information to the bottom of each article, we would have to find the blog directive, controller, potentially the service, and finally the view before we can even start making edits. If we want to rename a particular feature, it becomes a hunt throughout the directory structure to find all the affected files, make the changes, and ensure they are all in sync.
Best Practices
So what should we be doing to build scalable and maintainable AngularJS apps? The ideal structure should be modularized into specific functions and take advantage of AngularJS directives to compartmentalize the app. Here is an example of a better directory structure:
app/
shared/ // reusable components or partials
sidebar/
sidebarDirective.js
sidebarView.html
article/
articleDirective.js
articleView.html
components/ // each component is treated as a mini Angular app
home/
homeController.js
homeService.js
homeView.html
blog/
blogController.js
blogService.js
blogView.html
app.module.js
app.routes.js
assets/
img/ // images and icons
css/ // styles and related files
js/ // non-angular JavaScript files
libs/ // third-party libraries
index.html
At first glance, this structure may seem complex and harder to understand. However, let’s break it down and see what’s going on.
index.html
The index.html file is at the root of the front-end structure and is responsible for loading all the libraries and Angular elements.
Assets Folder
The assets folder is for assets that are not related to AngularJS code. The structure shown above is good enough for most apps, but there are many ways to organize this directory.
App Folder
This is where the main AngularJS app lives. It contains two subfolders and a couple of JavaScript files at the root level. The app.module.js file handles the setup of the app and loads AngularJS dependencies. The app.routes.js file handles all the routes and their configuration. The two subfolders, components and shared, are explained in more detail below.
Components Folder
The components folder contains the actual sections of the app. Each page should have its own subfolder with its own controller, services, and HTML files. Each component resembles a mini-MVC application, with its own view, controller, and potentially services file(s). If a component has multiple related views, it may be a good idea to further separate these files into ‘views’, ‘controllers’,
Please do not forget to bookmark our website for exclusive news, Updates and deals. And Always use the search widget on the page to make all your search queries.
[ad_2]