Best practices for creating an Angular project

Asked

Viewed 4,785 times

4

I am studying Angular to develop a web application, and I would like to know what are the best practices regarding the creation of folders, creation of the classes related to the service and other parts.

I did a Google search but found nothing similar.

angular

1 answer

3


Best practice to generate an angular design according to the documentation and with the angular-cli.

To install angular cli globally

npm install -g @angular/cli

Then to generate the project:

ng new NOME_DO_PROJETO

To generate a component for example

ng generate component meu-component

You can also use only g to get shorter see the example of how to generate a service:

ng g service meu-service

All possible generate options as well as their flags are available here

EDIT

About the angular design architecture:

To official documentation suggests an architecture by Features. Imagine you put all the services together or all the components together separate from their respective html. This architecture is discouraged since the Angularjs because it does not scale well. Imagine if you have 50 Components you have to find it in the middle of 50 in a Components folder is not a good one. as your application grows it will be super difficult to find the Component you want. That’s why having an architecture by routes/Feature is much easier for you to find the Components and files you want in large applications.

Another advantage of making architecture by Features is that you can make one Lazy-loading of your modules only when they are needed. Making a great application much faster. Imagine that you have a route /admin may be that 80% of your users never access that route and it may contain very heavy Components that would slow your site to load. So it makes sense to carry it only when that route is accessed making your site much lighter.

So it should be more specifically an architecture by routes. And consequently by Features.

In this case if you have for example a route /users that lists users.

Voce would have a folder

user

  • usuario.modulets.
  • usuario.routing.module.ts
  • usuario.container.Component.ts
  • usuario.container.Component.scss
  • usuario.container.Component.html
  • usuario.interface.ts --> this would be the model equivalent.
  • usuario.service.ts

user-list inside this user folder

  • usuario.list.Component.ts
  • usuario.list.Component.scss
  • usuario.list.Component.html

  • I mentioned in my question more specifically where to direct files such as service, model and so on...

  • 1

    I edited the answer about the architecture of the project

  • Interesting, I developed in Java and put everything separately you know, as I learned in the company, the services all together and so on. Funny q in a video vi q we should create a folder called shared and put for example the models within it

  • What worries me besides the organization is also in classes and books, there is no issue of inheritance when creating service classes for example

  • 1

    And debatable about putting models inside a Shard/models folder I would only put the interfaces that are actually shared and not all. In the web world it is recommended to use composition rather than inheritance.

  • Only on the inheritance part, would be more directed the service classes, creating abstract methods of crud

  • Only a good reference https://stackoverflow.com/questions/35346342/which-type-of-folder-structure-should-be-used-with-angular-2?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Show 2 more comments

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.