Summary

After reading this chapter, you got an overview of TypeScript and Angular concepts you need to understand for the upcoming chapters. TypeScript introduces types which help to recognize errors at development time. There are primitive types, types known from object-oriented programming languages, custom types, and so on. By default, TypeScript compiler always emits an JavaScript code, even in the presence of type errors. In this way, you can quickly migrate any existing JavaScript code to TypeScript just by renaming .js file to .ts without having to fix all compilation errors at once.

A typically Angular application is written in TypeScript. Angular provides a component-based approach which decouples your UI logic from the application (business) logic. It implements a powerful dependency injection system that makes reusing services a breeze. Dependency injection also increases the code testability because you can easily mock your business logic. An Angular application consists of hierarchical components, which communicate with each other in various ways such as @Input, @Output properties, shared services, local variables, and so on.

Angular is a modular framework. Module classes annotated with @NgModule provide a great way to keep the code clean and organized. Angular is flexible--lifecycle hooks allow us to perform custom logic at several stages in the in the component's life. Last but not least, it is fast due to smart change detection algorithm. Angular doesn't offer any rich UI components. It is just a platform for developing single page applications. You need a third-party library to create rich UI interfaces.

PrimeNG is a collection of such rich UI components for Angular 2+. In comparison with competitors, PrimeNG was created for enterprise applications and provides 80+ components. Adding PrimeNG dependencies is easy done. You only need to add PrimeNG and FontAwesome dependencies to the package.json file, and three CSS files: primeng.min.css, font-awesome.min.css, and theme.css for any theme you like. The next chapter will cover the theming concept in detail.

An Angular and PrimeNG application consists of ES6 (ECMAScript 2015) modules. Modules can be exported and imported. All modules in an application build a dependency graph. Therefore, you need a specific tool to resolve such modules starting at some entry point(s) and to output a bundle. There are some tools doing this and other tasks such as loading modules on demand, and similar.

In this chapter, SystemJS and Webpack loaders were discussed. SystemJS is only recommended for demo applications for the purpose of learning. Webpack-based builds are more sophisticated. Webpack has a combination of loaders for every file type and plugins. Plugins include useful behaviors into the Webpack build process, for example, creating common chunks, minification of web resources, copying files and directories, creating SVG sprites, and more. To quickly start the development in TypeScript and Angular, generate your projects with Angular CLI. This is a scaffolding tool, which makes it easy to create an application that works out of the box.