In this book, we will be covering different kinds of projects, from the basic Angular app to a server-rendered one, and a native app for Android and iOS. We will also look at how to create a component library for our enterprise applications and start testing our components. We will be using different Angular component libraries and tools and get a holistic view of Angular Framework and its capabilities.

Angular apps are written using web technologies. In order to run Angular apps, we need to install Node.js on our machine, which is what we will be doing in this first chapter.

Angular is a framework for building mobile and web applications. It uses TypeScript, which is a superscript of ECMAScript. It adds support for types in JavaScript, which makes the development of Angular apps easier at compile time. We will look into some basic concepts of TypeScript in this chapter, which will explain some of the syntax that we will be using in this book.

Another tool we will look at is Angular CLI, the command-line interface program that the Angular team has created to help with the development and maintenance of Angular apps.

We could write Angular apps using a simple text editor, but to get full productivity out of building our Angular application, we will be using VS Code. Instead of being an Integrated Development Environment (IDE), it's a code editor with rich extension support. In this chapter, we will use VS Code and install the required extensions to make Angular development faster.

The following topics will be covered in this chapter:

• Installing Node.js
• Understanding the basics of TypeScript
• Introducing Angular CLI
• Introducing Angular Console
• Installing VS Code and installing various extensions 
• Installing Augury and looking at various sections that help us debug our application

If you don't have Node.js installed on your machine, make sure you go to https://nodejs.org/en/ and follow the instructions for the installation of Node.js on your machine.

To make sure you have Node.js installed on your machine, run node --version. If you have Node.js installed, the version of the installed Node.js environment is printed. The most recent version at the time of writing is v12.10.0.

Make sure that your version is above v8.0.0. If it's not, then please update your version of Node.js.

TypeScript is a superset of the JavaScript language that was built by Microsoft. It adds the functionality of being able to add types to JavaScript code and transpiles the TypeScript code into JavaScript. The advantage that we get by using TypeScript is that since it's a compiled language that compiles to JavaScript, we get failure information (if there is any) at compile time. This means that we don't find errors after the JavaScript code gets to run on the browser.

TypeScript adoption has been increasing since 2016. One of the reasons for its adoption in the JavaScript ecosystem has been Angular. Angular is built entirely using TypeScript, and so is almost all of the community's Angular modules and the applications using it.

TypeScript not only supports most of the features from ECMAScript, such as classes, arrow functions, template literals, import/export, and so on, but also transpiles them to equivalent ES5 JavaScript code so that you don't have to worry about supporting browsers that don't support specific ECMAScript features.

Let's cover a few of the important concepts of TypeScript, interfaces, decorators, and access modifiers.

TypeScript has a special keyword called interface that doesn't exist in ECMAScript. Interfaces fill the role of naming the types in TypeScript and is used to describe the contracts within the code:

interface ICar {
    make: string;
    model: string;
    year: number;
    vin?: string;
}

Here, we have an interface for Car called ICar; we have added I before Car to describe it as an interface. In our ICar interface, we have make and model as string types, and year as a number. We also have an optional vin in our object shape with the type of string, it is optional is represented by ?.

To use this interface, we assign the ICar interface to the car variable, as follows:

const car: ICar = {
    make: 'Chevrolet',
    model: 'Malibu',
    year: 2019,
};

This is how TypeScript helps you to assign different types and also use interfaces to define types of an object.

Decorators can be used as wrappers around code, such as classes, functions, or even properties, as well as getters and setters. They are used to add an additional feature to that piece of code. 

The Angular team wanted to use decorators in JavaScript—in fact, the Angular team first proposed this by creating a superset of TypeScript called AtScript, which was later merged into TypeScript. Decorators have been proposed as a feature for future JavaScript. The following code shows examples of class and property decorators:

@Component({
    selector: 'app-cars',
    templateUrl: './cars.component.html',
    styleUrl: './cars.component.css'
})
class CarsComponent {
    @Input() cars: ICar[]; // Array of ICar type
    // property sameMake takes type boolean explicitly here because of   
       the assignment
    private sameMake = true;
    
    /*
        Function updateCarYear takes parameter car of type ICar,
        and doesn't returns anything(void)
    */
    public updateCarYear(car: ICar): void {
        car.year = car.year + 1;
   }
}

In this example, we are using a couple of decorators: @Component and @Input. @Component is a class decorator that's defined by Angular which takes the configuration of the component as an object, whereas @Input is a property decorator that makes the cars property the input for the component.

We see how these simple decorators can add a lot of capabilities to the classes or class properties. Next, let's learn about access modifiers.

In the preceding example regarding decorators, we can also see the use of access modifiers (public and private). If the property is going to be used by any class that extends this class or if the property is going to be used in a template (in terms of Angular), then it should be marked as public; otherwise, it should have the access modifier marked as private.

Now that we understand some basics of TypeScript, let's also get familiar with Angular CLI, a command-line interface tool developed by the Angular team to develop Angular applications.

Angular CLI is the command-line interface tool that helps you kickstart new projects and maintain your application using best practices while you're creating different components of Angular, and also lets you test these practices. It also allows you to build for production and serve the application for development with its live reloading capability, along with the ability to lint, test, and run end-to-end (e2e) test cases. This project is open source and is maintained by the Angular team. Because of its wide use in the Angular community—apart from making life easier while developing an application—if you were to encounter a new Angular app that uses Angular CLI, it would follow the same shape. We will be using Angular CLI to create Angular applications and add additional functionality as and when required.

To install Angular CLI, make sure that you have installed Node 8 or above. Then, run the following command in the terminal:

> npm install -g @angular/cli

Alternatively, you can use npx instead of installing Angular CLI globally in order to avoid updating it in the future. In this book, we will not be using npx to run Angular CLI commands.

To make sure that @angular/cli has been installed, and to check the version of the CLI that you have, run the following command:

> ng version

Here, ng is the command of Angular CLI, and version is one of the commands in Angular CLI which will give you the global version as well as the local project's Angular CLI version. Global version is the version of Angular CLI installed using npm on the machine, whereas the local version is specific to the project. It will also describe all the different @angular packages that are being used in the project folder.

Now that Angular CLI is available on your local machine, you can use it for various purposes:

• Scaffolding a new Angular app
• Updating existing Angular app to newer version of Angular
• Generating new files
• Serving the application
• Building the application
• Testing the application

And many more.

Let's look at the capabilities of Angular CLI next.

Angular CLI lets you create a basic application with all the required setup to develop a professional/enterprise application. Now that we have installed Angular CLI, let's generate a new Angular project. We can do that by running the following command:

> ng new angular-project-name

This command creates a folder called angular-project-name and all the files that are required for a basic Angular application.

If you peek into the folder, you will see that it consists of the following files:

• angular.json: This is a configuration file for the Angular CLI application. It consists of all the application's descriptions and the configurations for those apps. If you need to add projects, add global assets/styles/scripts, or add some configurations, you can make a change to this file.
• tsconfig.json: This file consists of the TypeScript configuration for the project.
• tslint.json: This file consists of all the linting rules for this Angular app. If you peek into the file, you will see that it extends codelyzer, which is a custom TypeScript linter. This adds more Angular-specific rules to tslint configurations.
• src: This folder consists of application-related files. Some of these are as follows:
  • styles.css: This file is a global CSS file that will be used in the application.
  • polyfills.ts: This file has polyfills for the application to make the app run on older browsers.
  • browserlist: This file consists of browser versions that the app supports. This file is used by autoprefixer to add vendor prefixes based on the browser's support in this file.
  • main.ts: This is the main TypeScript file for the application. It bootstraps AppModule.
  • app/app.module.ts: This is the Angular's app module, also known as the root module for the application. It initially has the declaration of AppComponent. The files related to AppComponent can be found in the app folder.
• e2e folder: This folder consists of all the end-to-end testing files that use Protractor.

Now that we know how to scaffold a basic Angular app, let's learn about the other actions that Angular CLI can perform.

Angular has adopted semantic versioning, which includes major, minor, and patch releases. A major release is updated when breaking changes or substantial changes are introduced in the framework; a minor release is updated when there is a new feature being introduced in the framework; and patch releases are to fix bugs. These help users find out the potential impact of updating. Every six months, Angular releases a major update, and around 1-3 minor updates and patches every week.

With this comes the difficult task of updating the application to the latest version every six months. The Angular CLI makes this easier to update. To update Angular, run the following command in your angular application folder in the terminal.

> ng update @angular/cli @angular/core

You can also use flags such as --all and --next to update all the available updates in all the Angular schematics packages installed, and update it to the latest available version of the packages.

For more detailed help about upgrading, please visit http://update.angular.io. On it, you can select different options about your current state of the application and to what version you want to upgrade, and get a checklist of stuff you might need to update for a successful update.

Generating different files for things such as components, directives, pipes, and so on, can be tedious for some people, as it requires adding multiple files and some boilerplate code every time we create them. The Angular CLI has a command called generate that generates different kinds of files. It allows you to generate components, which are the basic building blocks of Angular apps. It generates TypeScript files, CSS files, HTML files, and a spec file. It reduces the effort of manually creating the files and then writing the initial boilerplate for the integration of those files.

To find out what files the Angular CLI can generate, please visit https://angular.io/cli/generate.

To serve an Angular app using development settings, run ng serve or npm start in your Terminal and open http://localhost:4200/ in your browser. You will see that a minimalistic Angular app has been created by the Angular CLI:

We served the application so that we can develop and see the changes of our code change in the browser. Now when we are ready for our application to be deployed to production, we need to optimize the application by building and bundling our application. Let's look at it next.

If you want to deploy your application to production, we need to first build our application and deploy the files generated after the build to the required server. To build the application for deployment, run the following command:

> ng build --prod

This command will create a dist folder, where you will be able to see all the files of the build app. You could serve this application using a local server such as http-server.

The prod flag in the preceding command creates an optimized bundle of the application. It does Ahead of Time (AOT) compilation using the ngc (the Angular compiler), which is built on top of the TypeScript compiler, to create highly optimized code. This will make the application smaller and faster.

Angular CLI makes it to add new capabilities to your application via the use of CLI extensions. There are many CLI extensions available; some of them have been built by the Angular team, but many have been created by the awesome Angular community.

Let's say you want to add the Progressive Web App capability to your app—you can just run the following command:

> ng add @angular/pwa

This command adds all the dependencies and file changes to the project, which will make it a basic Progressive Web App.

In this section, we have seen that Angular CLI can do a lot, from scaffolding the application to generating files, serving the application, building the application, and so on, with a lot of different options. This can become overwhelming for beginners to remember. In the next section, we will see another tool that can help new Angular developers to use Angular CLI without remembering all the different commands.

The Angular Console is a graphical user interface (GUI) tool for the Angular CLI that was built by the Narwhal Technologies (Nrwl) team. It makes it easier for a beginner who is not familiar with all the Angular CLI commands and with the different options available for each command to use the Angular CLI effectively and learn about different commands along the way. Now, let's learn how to download Angular Console and configure it:

1. Download Angular Console from https://angularconsole.com and complete the step-by-step installation.
2. When you open Angular Console, you will be given the option to either add a new project or use a current Angular CLI application. Let's go ahead and create a new application:

First, select the parent directory where the project will reside and then name the workspace for the project before selecting a schematic. Angular CLI uses schematics to provide you with different commands and functions that you can use for an application. Here, we are given the choice of using @schematics/angular, which is a default schematic that comes with Angular CLI, and @nrwl/schematics, which is an enterprise-ready monorepo schematic that was built by the Nrwl.io team:

Once the project has been created, you are taken to the Projects page. On this screen, you will see all the applications in the project. In the preceding screen, we can see one project: one is the main app. Additional applications can be configured using the angular.json file in the project.

We also have the Run button, and when you click it, it opens up a dropdown with Build, Serve, Test, Lint and E2e end-to-end test command. Once you click on Serve on the Projects page, you will be taken to the commands detail page. Here, you can add/change different fields, which are categorized into two buckets: Important and Optional. You can see this in the following screenshot:

You can change the fields and click on the Run button at the top to serve the application:

Once the build is complete, just click on the Open App link in the task output to open the application in the browser. 

You can close this command execution window by using the close icon in the top left and continue to use other features of Angular CLI using this GUI tool. Angular Console also allows you to add additional Angular CLI extensions. You can navigate to this option using the left menu on the Projects page.

Angular Console is a great tool for those who are beginners to Angular CLI as well as those who cannot keep up with all the commands and their options. Now that we have Angular Console installed, let's install the editor we will be using in this book, VS Code, and configure it for working with Angular projects.

VS Code is a code editor that was built by Microsoft. It's currently the most popular code editor for JavaScript projects. The best part about VS Code is its support for TypeScript projects and rich extensions. You can find so many useful extensions that support Angular development, which makes it the most used editor by Angular developers. You can use any text editor to develop Angular applications, but in this book, we will be using VS Code.

To install VS Code, go to https://code.visualstudio.com/. Download the latest stable version or the insiders version. VS Code releases new stable version every month, whereas the insiders version receives updates as soon as new changes are added to VS Code.

Augury is an application inspection tool and is one of the most commonly used developer tool extensions for Angular apps. It was built in collaboration with Rangle and Google and makes debugging and profiling Angular applications simpler during development by creating component tree visualizations and visual debugging tools.

Augury supports both Chrome and Firefox. To install it, either go to Chrome Web Store/Firefox Add-ons and search for Augury. Alternatively, you can go to https://augury.rangle.io/ and find the appropriate links for the respective extensions.

Once installed, go to an Angular application that's served using the development environment (that is, without prod mode enabled), open developer tools, find Augury in the tabs, and navigate to it:

In the top right-hand corner, you will find the Angular version that the application is being served with. The preceding screenshots show that the Angular Version that's being used in the app is 7.1.4.

On the top, we have three tabs,

• Component Tree: The Angular Component Tree structure is similar to the Elements panel, but with Angular components. We can also select the components and see more details about them in the right-hand panel.
• Router Tree: Used to visualize all the available routes in the application.
• NgModules: Lists all the modules in the application with all their dependencies.

You should also be able to see that the Component Tree tab is selected by default. Here, you can see the whole component tree, select different components, and view more details about its current state. Once a component has been selected in the Component Tree on the left, you can use $$el to access the component in the console. You will also find a link to View Source for that specific component, which is handy.

You can also select the Router Tree, where you can see all the routes that are being used in the application:

In this view, you can also see which routes are being Lazy loaded. We will talk about Lazy routes in more detail in Chapter 3, Building a Personal Blog Using Angular Router and WordPress.

The last tab in Augury is NgModules:

This shows all the different components that make up the Angular modules that are used in the application.

In this chapter, we have covered the basics tools that are required for building an Angular application. We installed Angular CLI, Angular Console, VS Code, and Augury to make our developer experience better. These tools will be used in the rest of the chapters to develop exciting projects.

In the next chapter, we will build a complete basic Angular app. This will be a flashcard application that displays a list of the available flashcards and also can add/edit/remove flashcards.