CODEWITHSUNDEEP
angularjsangular-ui-routerdirectory-structureangular-components
Dino
Dino

Reputation: 1347

angular best practice: folder structure, components, ui-Router

I am new to angular and I need someone to point me in the right direction preventing me from learning bad angular practices. I know there are similar questions around but I could not find the general answer I am looking for.

  1. it looks like the majority of companies are not switching to angular 2 and keep using angular 1.x so I have decided to learn angular 1.5. is this a wise decision?

  2. I saw two approaches to folder structure. The first one looks like the following:

    enter image description here

    routes are defined using the ngRoute method, the services folder contain the REST services and data hosts JSON objects used by the UI. Views contain the html files names according to the relevant URL addresses. In this example the REST services are called in the routes making data available by the time the DOM is ready

  3. the other approach I have seen is this one: enter image description here

    in this one routing is done using UI-Router and the routes are defined in the states.js file. Views and controller are then put together a folder inside the routes folder.

My question is which approach follows the best practices. Also I understand that angular 1.5 introduces components. Do they require a totally different structure or do they integrate with the above.

Thank you for your help.

Upvotes: 2

Views: 2510

Answers (2)

Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11137

I will answer the part of your question where you ask about folder structure. This answer assumes you want to use AngularJS instead of Angular, but with up-to-date technology and best practices.

That means using es2015, probably webpack, latest ui-router and angular components. If that's the case, head over to the angularjs styleguide by toddmotto, instead of the one by johnpapa. The latter doesn't mention angular.component at all.

So, here's the example file structure mentioned in toddmotto's styleguide. I will also end the answer right there.

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

Upvotes: 0

Kolby
Kolby

Reputation: 2865

You should check out the johnpapa angular style guide! Helped me immensely. It has a section on structure and recommends a folder by feature architecture.

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

Upvotes: 1

Related Questions