Chapter 2. The main artifacts of an Angular app
This chapter covers
- Understanding components, directives, services, modules, and pipes
- Generating components, directives, services, and routes with Angular CLI
- Looking at Angular data bindings
- Building the first version of the ngAuction app
In this chapter, we’ll start by explaining the roles of the main artifacts of Angular applications. We’ll introduce you to each one and show how Angular CLI can generate these artifacts. Then we’ll do an overview of the Angular CLI configuration file where you can modify your project settings.
After that, we’ll discuss how data binding is implemented in Angular. At the end of the chapter, you’ll develop the initial version of the ngAuction application that you’ll continue working on throughout the book.
A component, the main artifact of any Angular app, is a class with a view (UI). To turn a class into component, you need to decorate it with the @Component() decorator. A component can consist of one or more files—for example, a file with the extension .ts with the component class, a .css file with styles, an .html file with a template, and a .spec.ts file with test code for the component.
You don’t have to split the code of each component into these files. For example, you can have a component in just one file with inline styles and templates and no files with tests. No matter how many files will represent your component, they all should be located in the same directory.