Beginner Tips for Getting Started with Angular

Angular is an extensive framework and can be intimidating to jump into. After using it on a few projects, I’ve tracked some useful tips that have helped me use Angular more effectively. These will be more applicable to somebody just starting on Angular projects but could still be useful for someone with more experience.

Using the CLI

Angular has a lot of boilerplate code, even for just creating a new component. I recommend getting familiar with the Angular CLI to avoid the tedium of making component, template, style, and/or test files yourself. A simple command of ng generate component my-component saves a lot of setup time. Arguments to commands can further help, for instance, in component generation. This allows you to choose which module exports the component, whether the styles or template should be inlined, or what selector the component should use. You can find the CLI reference documentation here.

Testing

By default, ng test will open a new browser window to run tests in. If you want to avoid this, you can instead use ng test –browsers ChromeHeadless. Then, the test output will remain in the terminal where you’ve run the command.

Angular uses Jasmine for unit tests. One feature I find useful when working on tests is changing describe blocks to fdescribe (to focus on that block of tests) or xdescribe (to never run that block of tests). This can be particularly helpful when you have a large test suite and only want to run a subset of tests as you work on them.

Project Organization

Knowing what angular.json is responsible for can save a lot of trouble when working on a project. What’s configured there changes the behavior of certain build and development tools the CLI provides. You can tweak this to your preferences so the CLI will use Yarn as your package manager instead of NPM, or if you want to change the default prefix of your component selectors. You can read about what each part of the configuration does here.

Besides configuration, it’s handy to know ahead of time how you want to organize your project structure. One strategy I like is using what this author calls “Atomic Design.” It gives some guidelines to think about as you compose simple and complex components. The technique also shows how those can be organized relative to each other and the project as a whole. I recommend giving it a read, especially if you’re planning a larger project.

Using IDE features

Perhaps it’s a no-brainer to use an IDE. Still, I thought I would advertise some features here you should take advantage of as you work on an Angular project. Visual Studio Code is a popular editor that’s very configurable, including for Angular projects. I recommend the Angular Essentials Pack by John Papa. This includes everything you’d want to make the development experience better, from the language server to code snippets, to linting and formatting.

Personally, I’m a user of Jetbrains’ Webstorm IDE. Angular support is built-in, so you’ll get everything you’d get from VSCode but already baked in. A couple of advantages I enjoy are that CLI features are built-in, so you can generate new code straight from the IDE, and debugging is more straightforward. You can read about those features and more here.

Conversation

Join the conversation

Your email address will not be published. Required fields are marked *