16 Using Angular components and routing
This chapter covers
- Creating Angular components
- Navigating between components with routing
In the last chapter, you learned how to create a NativeScript-with-Angular app and began to re-create the Pet Scrapbook. We’ll be continuing to refine the Pet Scrapbook Angular by learning about Angular components and routing, two core concepts that parallel the concepts of vanilla NativeScript: pages and navigation.
In our experience, learning about Angular concepts on their own (without the context of a vanilla NativeScript app) can be confusing, so we’ve taken the time to build on things you’ve already learned about to help you quickly learn about Angular and how it’s used in a NativeScript-with-Angular app. Just like the last chapter, if you haven’t walked-through the official QuickStart guide for Angular, we strongly recommend you check it out at https://angular.io/docs/ts/latest/quickstart.html.
16.1 Creating static components
As you’ll recall, you learned that the app.module.ts file is the entry point for NativeScript-with-Angular apps. You also learned that Angular components are like NativeScript pages, but let’s dive a little deeper into how components and pages are similar. Figure 16.1 shows the contents of an Angular component.
Figure 16.1 Angular components have markup, style, and code.
