2

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.

Improve this question
3
  • Possible duplicate of AngularJS Style Guides - Todd Motto vs John Papa vs Minko Gechev Commented Dec 6, 2016 at 18:06
  • Unfortunately, this type of question isn't really the best fit for this format. It is very difficult to demonstrate a single answer which provides a solution which works to the exclusion of all others; Multiple answers will be correct, making the question and answers based on opinion. Commented Dec 6, 2016 at 18:11
  • In general, "Best Practice" is almost always opinionated. Commented Dec 6, 2016 at 18:11

2 Answers 2

Reset to default
1

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
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Johnpapa's guide on Angular 1.x does not refer to the new angular.component even once. That part of the question is not covered by this answer. I'll try to come back later when I have an answer that covers that too.
0

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
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.