1

I am not new to AngularJS and have been using it for quite a while already, building several complete apps (for both desktop and mobile).

I am changing the way I code with AngularJS because I have projects that need to be scalable. I used to have huge files of code, do-everything controllers, no directives and no components. This made it hard to edit my code after 2 weeks of not-working on a particular project (I'm sure everybody understands this).

I bought a couple of courses and started learning about what's known as the component approach. I can easily understand and put in practice the things I've learned, but this approach (components) requires being able to see the "full picture" (articulations?) of an application, which is very difficult for me.

Questions

  1. Is this correct: In AngularJS, modules are like features and they can contain multiple components (stateful/less)?
  2. When I build an app, should I first think of the modules and how they relate to each other and then think of what components I need for each one of these modules?
  3. What are the best things to do before the actual coding?

I'm asking these questions because although I feel comfortable working with AngularJS, it's hard for me to take a step back and visualize the whole project at once. I'd like to be able to understand everything that's going on in my app, "at the same time", this surely doesn't make much sense but hopefully you understand.

Also I'm not a native English speaker, but you've noticed.

Improve this question
6
  • Angular (2.0.0, 4.0.0) and AngularJS (1.x.x) are quite different frameworks. You should make it quite clear what Angular you are referring to. Commented Jan 29, 2017 at 13:46
  • I'm talking about AngularJS (as in my post), which is Angular 1.x.x as you just said. To be clearer I could say Angular 1.5+ (.component()). Commented Jan 29, 2017 at 14:01
  • ... and please remove the angular2 tag Commented Jan 29, 2017 at 14:02
  • I added an Angular 2 tag because I'm mostly asking about the approach I should be having when starting a project and thought that many things would apply to both versions of Angular, in terms of architecture. Commented Jan 29, 2017 at 14:05
  • 1
    Angular 1 and 2 are very different but I think the approach to componentizing features is not. Whether something should be a component, be reusable, have state or not, are things common to all component libraries. Commented Jan 30, 2017 at 0:15

3 Answers 3

Reset to default
1

Questions

  1. Is this correct: In AngularJS, modules are like features and they can contain multiple components (stateful/less)?

I'd agree with this. The idea of modules is to group functionality.

When I build an app, should I first think of the modules and how they relate to each other and then think of what components I need for each one of these modules?

Personally I don't think so. It is easy to get Analysis Paralysis. IMO you should break your app (or feature) into large components then break them into smaller components when the value presents itself.

What are the best things to do before the actual coding?

Drink coffee. Lot's of coffee.

If you are looking for something more concrete I did find this link useful. It is geared towards React apps but since you mentioned it is the component approach you are looking for, it should fit the bill.

As a side note, just my opinion but if you are familiar with directives I don't see a real benefit of using components as they are a simplified version of directives with fewer advanced features. Nothing wrong with that I just don't think it's useful if your already familiar with directives.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much for answering. I'm not (was not) familiar with directives until I took the courses, so I thought I'd use components since it's there now. This React article was helpful, got me interested in it. About your coffee advice, how much exactly should I drink a day to be a better developer?
1

There is a lot to talk about actually, but the best way to get into creating a project with AngularJS that is scalable and maintainable might be using a ready boilerplate.

I used ng6 starter, which is a boilerplate comes with webpack, karma & jasmine for tests. Also thanks to webpack you can use ES6 properties (classes) that will make your project more compact.

One of the best thing I like is every component has its own css configuration, that is really helping a lot when you are working on a complitated interface.

NG6 Starter: https://github.com/AngularClass/NG6-starter

And also what about using Angular 2?

Improve this answer

2 Comments

Thank you for your answer! I will take a look at NG6. I think using a boilerplate is a good idea, it keeps things structured in a way. I also would like to understand how to visualize my app and be able to draw it on a board because when I start coding directly I often get lost.
Also, you are right, I'll be learning/moving to Angular very soon (beginning of next year). I'm stuck with AngularJS for now because of deadlines :).
0

Get comfortable with components first. Take baby steps rather than a huge overhaul.

It's easy to make a small component in an existing AngularJS1 app first. When you find yourself repeating a portion of dom within a view and the view controller's doing a lot of things for those portions. That's an opportunity for a component right there.

When you're done, try to make the view a component by itself. Use ui-router 1.x instead of 0.x that is able to configure a state url to use a component. After you're done, the state configuration has been changed.

// from this
.state('base.contacts', {
  url: '/contacts',
  template: `your html`,
  controller: 'ContactsCtrl',
  controllerAs: 'ContactsCtrl'
})
// to this
.state('base.contacts', {
  url: '/contacts',
  component: 'contacts'
})

When you've arrived here, you're probably ready for generators and use a complete component-based solution from scratch. Basically what the other fine answers are telling you.

I would also go by the style guide of toddmotto if you intend to migrate the app to Angular later on. The one by johnpapa for AngularJS does not mention angular.component.

1 With AngularJS I'm referring to AngularJS 1.5/6.x and with Angular I'm referring to Angular 2+ aka just Angular

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.