Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Angular 4 Best Practices

Monday, October 2nd, 2017 by Servage

angularAngular is one of the most popular front-end frameworks. Developers sometimes prefer to use their own approach when it comes to naming conventions, whitespace usage, file structure and so on. However, if every developer chooses their own path to follow, managing a single code base in a team becomes quite challenging. To solve this, Angular has a set of rules that all developers should follow when working on an Angular project. Let’s have a look at those recommendations set by the team behind Angular.

File Names

Let’s start with file and directory naming conventions. By following the Angular naming conventions, you can easily identify what a file does just by looking at the file name.

The recommended format for file names is file.type.ts where type is the type of the file, such as service or component. If you are working on a service that fetches users from a database using HTTP requests, you should name the file user.service.ts. If the name of your file consists of more than one word, separate them with dashes.

Classes and interfaces should be capitalized using pascal case, e.g. “AppRoutingModule”. Constants created with the const keyword should be in camel case, e.g. “authRoutes”. However, if an application has already named them in all upper snake case (“AUTH_ROUTES”) which is common in other languages, you can keep that style. Do prefer camel case but consistency is more important. Class properties and methods should also be named using camel case.

Directory Structure

Next up is directory structure. First of all, all files should be responsible for only one thing. If your file name is user.service.ts, it should only contain one service. If a feature consists of multiple files like a .ts, .html and .css file, they should be grouped together in a directory. Components should be placed under the src/app/<component-name> directory.

Coding Conventions

You should create feature modules to separate features from each other. A feature module allows you to keep the imports, exports, declarations and routes inside that module only. Apart from keeping your directory structure clean, by doing so you can also lazy load your modules only when they are needed to make your application perform faster. A feature module is simply a TypeScript class with the @NgModule decorator. If the feature is shared between multiple components, it should be a shared feature module under the src/app/shared directory.

When working with services, make sure to attach them to the upmost module in the directory structure to avoid making unnecessary new instances of the same service. If you place your service in the providers array of your app.module.ts, a single instance is shared between the whole application. In many cases this is exactly what you need.

Categories: Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.