Creating an Organized Framework for a Website Application

In my particular case, I am utilizing an AngularJS application, although I believe this inquiry is relevant to any Single Page App.

I've implemented a component structure as outlined in various resources such as this and this.

Let's assume I have a setup similar to the one demonstrated in John Papa's example:

app/
    app.module.js
    app.config.js
    app.routes.js
    directives.js
    layout/
        shell.html      
        shell.controller.js
        topnav.html      
        topnav.controller.js       
    people/
        attendees.html
        attendees.controller.js  
        speakers.html
        speakers.controller.js
        speaker-detail.html
        speaker-detail.controller.js
    sessions/
        sessions.html      
        sessions.controller.js
        session-detail.html
        session-detail.controller.js  
    services/       
        data.service.js  
        localstorage.service.js
        logger.service.js   
        spinner.service.js

Here are some questions regarding the most effective approach (based on your experience) to follow this practice, potential pitfalls to watch out for, and strategies to prevent future issues with the directory structure: considering that we are dealing with a large-scale application that will continue to expand over time.

  • If spinner.service.js is only utilized within the layout controllers, should it be placed in the /layout directory? Or should all services always be housed in a generic folder?

  • For instance, if I want to employ /people/speakers simultaneously as a partial within another page like /admin/speakers, how should I handle this scenario? Should I consider making speakers a standalone component at the same level as /people and /admin?

  • To pose a more broad question: in cases where both a detail view and a list view of an item are required, would it be preferable to consolidate everything inside the /item directory (as illustrated in this instance)?

javascriptangularjsweb-applicationssingle-page-applicationdirectory-structure

Answer №1

Based on my personal experience, I can provide some insights that may resonate with some individuals while others may have differing opinions.

Let's take a closer look at the angular structure I typically follow (similar to the examples provided):

  /
  - app/
      - feature/
          - {featurename}/
               - controller/  // -> All MyFeatureController.js files reside here
               - directive/   // -> Components specific to this feature
               - service/     /* -> Including utilities like SomethingService.js 
                                 for handling backend calls with promises,
                                 and SomethingElseHelper.js for centralizing business logic */
               - template/    // -> Partial HTML files not meant for direct user view
               - view/        // -> Endpoint views used in routing

This layout covers the basics, which can be further customized for larger applications by adding sub-features. Typically, I maintain a common/ folder for shared elements such as directives, services, header/footer/menu templates and their controllers.

If you'd like to see an example, feel free to explore a personal project code currently under development.

In response to your queries:

  1. When programming, I focus on writing specific code initially. If redundancy is identified, I refactor and generalize it. This approach extends to project structuring as well. Services exclusive to a feature belong within its respective folder. As these services become relevant across multiple features, they are moved to a common level.
  2. Considering scenarios like admin/speakers and people/speakers, determining core client features is key. Whether control is granted to admin or people dictates the naming convention. For instance, speakers/admin and speakers/people align with feature-centric organization based on functionality.
  3. Given my adherence to a feature-oriented framework, I would opt for designs such as item/detail/ and item/list/ if required.

I trust this information proves helpful. Should you seek further clarification on my approach to project structuring, don't hesitate to reach out.

PS: Explore another informative post related to this topic.

EDIT: Currently, I employ a modified version of this approach to accommodate component-based application development using Angular 1.5.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What distinguishes submitting a form from within the form versus outside of it?

When the code below, you will see that when you click btnInner, it will alert 'submit', but clicking btnOuter does not trigger an alert. However, if you then click btnInner again, it will alert twice. Now, if you refresh the page: If you first ...

javascriptjqueryhtmlforms

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

I am having trouble sending my variable to a MySQL database. The database only displays the variable when using the HTML input tag. The error message I received was "Undefined index: rate & amount." Seeking assistance to resolve this issue. Thank you! ...

javascriptphphtmlmysql

Is there a way to retrieve the file path of the file that is imported using an alias in Vite (Vue3)?

Hello! I have a few inquiries. Is it feasible to obtain the file path of the file utilizing an alias for import in Vite (Vue3)? Setup Here's the directory structure I'm using, purely for illustrative purposes: src/ module_a/ some_ ...

javascriptvue.jsimportvite

Using the same conditional statement on multiple pages within a Next.js application

I'm currently working on a project with Next.js and I've encountered an issue when fetching data from my server using the useSWR hook. There are certain conditions that need to be met in order to display specific content on the page, as shown in ...

javascriptreactjsnext.js

Encountered an AngularJS issue when attempting to utilize a factory from a separate file

Hello, I am facing an issue with two AngularJS files. The first file is a controller and the second is a factory function, but it is resulting in an 'unpr' error. The factory file contains: var app = angular.module('basicApi',[]); app ...

angularjsangular-factory

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

What are some strategies to enhance the efficiency of this code and reduce repetition?

Here's an overview of the component in question export default () => { const { currentUser, logout } = useAuth(); const [sideBarOpen, setSideBarOpen] = useState(false); const theme = useTheme(); const classes = useStyles(); const isSmall ...

javascriptreactjsmaterial-uirefactoring

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

Guide to scraping a website using node.js, ASP, and AJAX

I am currently facing an issue where I need to perform web scraping on this specific webpage form. This webpage is dedicated to vehicle technical reviews, and you can try inputting the car license CDSR70 for testing purposes. As mentioned earlier, I am u ...

javascriptasp.netajaxnode.jsweb-scraping

KnockoutJS - Struggling to bind model from simple JSON array

I've been working on an application that relies on a static JSON array, without the support of a backend service. I've been attempting to bind this JSON array to the page using KnockoutJS. Although I can successfully load the JSON array and creat ...

javascriptarraysjsonknockout.js

Formatting UTC time in Angular for display

After converting a group of dates to UTC in my controller, I found myself facing an unusual problem when trying to format them. When attempting to display the date in a specific time format using the code snippet below: <label>{{ '2016-07-22T1 ...

angularjs

Ways to integrate PHP MySQL with NodeJS and SocketIO

Currently, I am working on developing a chat application. I have successfully implemented features like creating accounts, logging in, selecting, viewing, and more using PHP MySQL. Now, I am venturing into the Instant Messaging aspect by utilizing NodeJS a ...

javascriptphpmysqlnode.jsajax

Automate the installation of an npm package while including the --save-dev flag

There is a lesser-known trick where npm can be utilized as a Node.js module to execute commands within the code. I am looking to gather user input on which packages are needed, install them programmatically while also saving them to the package with the - ...

javascriptnode.jsnpm

Background PHP/JS authentication through HTTP

Recently, I developed a PHP website that includes embedded web-cam snapshots which refresh every 2 seconds using JavaScript. For the first camera, I can easily log in using URL parameters like this: cam1-url?usr=usr&pwd=pwd. However, the second camer ...

javascriptphphttpauthentication

Update Refresh Token within Interceptor prior to sending request

I'm stuck on this problem and could use some guidance. My goal is to refresh a user's access token when it is close to expiration. The authService.isUserLoggedIn() function returns a promise that checks if the user is logged in. If not, the user ...

javascriptangularjs

Revealing and concealing adjacent elements within a specified class

In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...

javascriptjqueryhtmlcss

"Unlocking the Power of CK Editor for Maximizing Value and Effectively Managing

I have a form with a field titled Description. I am using CKEditor to pass the value entered into this field and store it in my database. Can someone assist me with this? Below is the code snippet: <div id="descriptionMore" style="margin-bottom:20px; ...

javajavascriptjqueryhtmlliferay

Secure the data by encrypting it in the frontend before decrypting it in the

How can I achieve the highest level of security in this situation? I have experimented with using the same public key for all users to encrypt data transmitted over HTTPS to my backend automatically. However, individuals could potentially intercept and d ...

javascriptvue.jsencryptionnestjsrsa

Do form validations affect the values assigned to ng-model objects?

If a form has the structure below: <form> <input type="text" required ng-model='myValue' ng-maxlength='5'></input> {{myValue}} {{myValue.length}} </form> Is there a way to prevent the model from b ...

javascriptformsangularjsvalidation

Is it possible to both break down a function parameter and maintain a named reference to it at the same time?

When working with stateless functional components in React, it is common to destructure the props object right away. Like this: export function MyCompoment({ title, foo, bar }) { return <div> title: {title}, ...</div> } Now ...

javascriptreactjstypescriptdestructuring