A patch change means we increment the right most digit by one. Changing the said software from 1.0.0 to 1.0.1 is a small change, usually a bug fix. As a user of that software you don't really have to worry; if anything, you should be happy that something is suddenly working better. The point is, you can safely start using 1.0.1.

This means the software is increased from 1.0.0 to 1.1.0. We are dealing with a more severe change as we increase the middle digit by one. This number should be increased when functionality is added to the software and it should still be backwards compatible. Also in this case it should be safe adapting the 1.1.0 version of the software.

At this stage, the version number increases from 1.0.0 to 2.0.0. Now this is where you need to look out. At this stage, things might have changed so much that constructs have been renamed or removed. It might not be compatible to earlier versions. I'm saying it might because a lot of software authors still ensure that there is a decent backwards compatibility, but the main point here is that there is no warranty, no contract, guaranteeing that it will still work.

The first version of Angular was known by most people as Angular 1; it later became known as AngularJS. It did not use semantic versioning. Most people actually still refer to it as Angular 1.

Then Angular came along and in 2016 it reached production readiness. Angular decided to adopt semantic versioning and this caused a bit of confusion in the developer community, especially when it was announced that there would be an Angular 4 and 5, and so on. Google, as well as the Google Developer Experts, started to explain to people that it wanted people to call the latest version of the framework Angular - just Angular. You can always argue on the wisdom of that decision, but the fact remains, the new Angular is using semantic versioning. This means Angular is the same platform as Angular 4, as well as Angular 11, and so on, if that ever comes out. Adopting semantic versioning means that you as a user of Angular can rely on things working the same way until Google decides to increase the major version. Even then it's up to you if you want to remain on the latest major version or want to upgrade your existing apps.

Web components is a concept that encompasses four technologies designed to be used together to build feature elements with a higher level of visual expressivity and reusability, thereby leading to a more modular, consistent, and maintainable web. These four technologies are as follows:

In theory, an Angular component is indeed a custom element that contains a template to host the HTML structure of its layout, the latter being governed by a scoped CSS style sheet encapsulated within a shadow DOM container. Let's try to rephrase this in plain English. Think of the range input control type in HTML5. It is a handy way to give our users a convenient input control for entering a value ranging between two predefined boundaries. If you have not used it before, insert the following piece of markup in a blank HTML template and load it in your browser:

<input id="mySlider" type="range" min="0" max="100" step="10">

You will see a nice input control featuring a horizontal slider in your browser. Inspecting such control with the browser developer tools will unveil a concealed set of HTML tags that were not present at the time you edited your HTML template. There you have an example of shadow DOM in action, with an actual HTML template governed by its own encapsulated CSS with advanced dragging functionality. You will probably agree that it would be cool to do that yourself. Well, the good news is that Angular gives you the toolset required for delivering this very same functionality, so we can build our own custom elements (input controls, personalized tags, and self-contained widgets) featuring the inner HTML markup of our choice and our very own style sheet that does not affect (nor is impacted) by the CSS of the page hosting our component.

Angular applications can be coded in a wide variety of languages and syntaxes: ECMAScript 5, Dart, ECMAScript 6, TypeScript, or ECMAScript 7.

TypeScript is a typed superset of ECMAScript 6 (also known as ECMAScript 2015) that compiles to plain JavaScript and is widely supported by modern OSes. It features a sound object-oriented design and supports annotations, decorators, and type checking.

The reason why we picked (and obviously recommend) TypeScript as the syntax of choice for instructing how to develop Angular applications in this book is based on the fact that Angular itself is written in this language. Being proficient in TypeScript will give the developer an enormous advantage when it comes to understanding the guts of the framework.

On the other hand, it is worth remarking that TypeScript's support for annotations and type introspection turns out to be paramount when it comes to managing dependency injection and type binding between components with a minimum code footprint, as we will see further down the line in this book.

Ultimately, you can carry out your Angular projects in plain ECMAScript 6 syntax if that is your preference. Even the examples provided in this book can be easily ported to ES6 by removing type annotations and interfaces, or replacing the way dependency injection is handled in TypeScript with the most verbose ES6 way.

For the sake of brevity, we will only cover examples written in TypeScript and actually recommend its use because of its higher expressivity thanks to type annotations, and its neat way of approaching dependency injection based on type introspection out of such type annotations.

What you need to get started is to have Git and Node.js installed. Node.js will also install something called NPM, a node package manager that you will use later to install files you need for your project. After this is done, you are ready to set up your Angular application. You can find installation files to Node.js at https://nodejs.org.

The easiest way to have it installed is to go to the site:

https://nodejs.org/en/download/

Installing Node.js will also install something called NPM, Node Package Manager, which you will need to install dependencies and more. The Angular CLI requires Node 6.9.0 and NPM 3 or higher. Currently on the site, you can choose between an LTS version and the current version. The LTS version should be enough.

Installing the Angular CLI is as easy as running the following command in your Terminal:

npm install -g @angular/cli

On some systems, you may need to have elevated permissions to do so; in that case, run your Terminal window as an administrator and on Linux/macOS instead run the command like this:

sudo npm install -g @angular/cli

Once the Angular CLI is in place the time has come to create your first project. To do so place yourself in a directory of your choice and type the following:

ng new <give it a name here>

Type the following:

ng new TodoApp

This will create a directory called TodoApp. After you have run the preceding command, there are two things you need to do to see your app in a browser:

This will be accomplished by the following commands:

cd TodoApp
npm start

At this point, open up your browser on http://localhost:4200 and you should see the following:

The Angular CLI doesn't just come with code that makes your app work. It also comes with code that sets up testing and includes a test. Running the said test is as easy as typing the following in the Terminal:

npm test

You should see the following:

How come this works? Let's have a look at the package.json file that was just created and the scripts tag. Everything specified here can be run using the following syntax:

npm run <key>

In some cases, it is not necessary to type run and it will be enough to just type:

npm <key>

This is the case with the start and test commands.

The following listing makes it clear that it is possible to run more commands than start and test that we just learned about:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

So far we have learned how to install the Angular CLI. Using the Angular CLI we have learned to:

That is quite an accomplishment. We will revisit the Angular CLI in a later chapter as it is a very competent tool, capable of a lot more.

First off, let's import the component decorator:

import { Component } from '@angular/core';

Then create the class for your component:

class AppComponent {
  title:string = 'hello app';
}

Then decorate your class using the Component decorator:

@Component({
  selector: 'app',
  template: `<h1>{{ title }}</h1>`
})
export class AppComponent {  
  title: string = 'hello app';
}

We give the Component decorator, which is function, an object literal as an input parameter. The object literal consists at this point of the selector and template keys, so let's explain what those are.

<app></app>

<h1>{{ title }}</h1>

hello app

import { AppComponent } from './app.component';

@NgModule({ 
 declarations: [AppComponent]
})
export class AppModule {}

@NgModule({
  declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

The main.ts file is your bootstrap file and it should have the following content:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

What we do in the preceding code snippet is to provide the recently created module as an input parameter to the method call bootstrapModule(). This will effectively make the said module, the entry module of the application. This is all we need to create a working application. Let's summarize the steps we took to accomplish that:

You as a reader have had to swallow a lot of information at this point and take our word for it. Don't worry, you will get a chance to get more acquainted with components in this chapter as well as Angular modules in upcoming chapters. For now, the focus was just to get you up and running by giving you a powerful tool in the form of the Angular CLI and show you how few steps are actually needed to have an app rendered to the screen.

Create a new timer.component.ts file in the same folder and populate it with the following basic implementation of a very simple component. Don't worry about the added complexity, as we will review each and every change made after the code block:

import { Component } from '@angular/core';

@Component({
  selector: 'timer',
  template: `<h1>{{ minutes }}:{{ seconds }} </h1>>`
})
export class TimerComponent {
  minutes: number;
  seconds: number;

  constructor(){
    this.minutes = 24;
    this.seconds = 59;
  }
}

At this point, we have created a whole new component by creating the TimerComponent class and decorated it with @Component, just as we learned how to do in a previous section. We learned in the previous section that there is more to be done, namely to tell an Angular module that this new component exists. The Angular module is already created so you just need to add our fresh new component to its declarations property, like so:

@NgModule({
  declarations: [
    AppComponent, TimerComponent
  ],
  bootstrap: [AppComponent]
})

As long as we only had the AppComponent we didn't really see the point of having an Angular module. With two components registered with our module, this changes.  When a component is registered with an Angular module it becomes available to other constructs in the module. It becomes available to their template/templateUrl. This means that we can have TimerComponent rendered inside of our AppComponent.

Let's therefore go back to our AppComponent file and update its template to show just that:

@Component({
  selector: 'app',
  template: `<h1>{{ title }}</h1> <timer></timer>`
})
export class AppComponent {  
  title: string = 'hello app';
}

In the preceding code, we highlight in bold how we add the TimerComponent to the AppComponents template. Or rather we refer to the TimerComponent by its selector property name, which is timer.

Let's show the TimerComponent again, in it's entirety, and highlight the selector property because this is a really important thing to understand; that is, how to place a component in another component:

import { Component } from '@angular/core';

@Component({
selector: 'timer',
  template: `<h1>{{ minutes }}:{{ seconds }} </h1>>`
})
export class TimerComponent {
  minutes: number;
  seconds: number;

  constructor(){
    this.minutes = 24;
    this.seconds = 59;
  }
}

We want to do more than just display a handful of numbers, right? We actually want them to represent a time countdown, and we can achieve that by introducing these changes. Let's first introduce a function we can iterate on in order to update the countdown. Add this function after the constructor function:

tick() {
  if(--this.seconds < 0) {
    this.seconds = 59;
    if(--this.minutes < 0) {
      this.minutes = 24;
      this.seconds = 59;
    }
  }
}

constructor() {
  this.minutes = 24;
  this.seconds = 59;
  setInterval(() => this.tick(), 1000);
}

constructor() {
  this.reset();
  setInterval(() => this.tick(), 1000);
}

reset() {
  this.minutes = 24;
  this.seconds = 59;
}

private tick() {
  if(--this.seconds < 0) {
    this.seconds = 59;
    if(--this.minutes < 0) {
      this.reset();
    }
  }
}

Angular provides top-notch support for events through a declarative interface. This means it is easy to hook up events and have the point to method. It's also easy to bind data to different HTML attributes, as you are about to learn.

Let's first modify our template definition:

@Component({
  selector: 'timer',
  template: `
    <h1>{{ minutes }}: {{ seconds }} </h1>
    <p>
      <button (click)="togglePause()"> {{ buttonLabel }}</button>
    </p>
  `
})

We used a multiline text string! ECMAScript 6 introduced the concept of template strings, which are string literals with support for embedded expressions, interpolated text bindings, and multiline content. We will look into them in more detail in Chapter 3, Introducing TypeScript.

In the meantime, just focus on the fact that we introduced a new chunk of HTML that contains a button with an event handler that listens to click events and executes thetogglePause()method upon clicking. This (click) attribute is something you might not have seen before, even though it is fully compliant with the W3C standards. Again, we will cover this in more detail in Chapter 4, Implementing Properties and Events in Our Components. Let's focus on thetogglePause()method and the newbuttonLabelbinding. First, let's modify our class properties so that they look like this:

export class TimerComponent {
  minutes: number;
  seconds: number;
  isPaused: boolean;
  buttonLabel: string;
  // rest of the code will remain as it is below this point
}

We introduced two new fields. The first is buttonLabel, which contains the text that will later on be displayed on our newly-created button. isPaused is a newly-created variable that will assume a true/false value, depending on the state of our timer. So, we might need a place to toggle the value of such a field. Let's create the togglePause() method we mentioned earlier:

togglePause() {
  this.isPaused = !this.isPaused;
  // if countdown has started
  if(this.minutes < 24 || this.seconds < 59) {
    this.buttonLabel = this.isPaused ? 'Resume' : 'Pause';
  }
}

In a nutshell, the togglePause() method just switches the value of isPaused to its opposite and then, depending on such a new value and whether the timer has started (which would entail that any of the time variables has a value lower than the initialisation value) or not, we assign a different label to our button.

Now, we need to initialize these values, and it seems there is no better place for it. So, the reset() function is the place where variables affecting the state of our class are initialized:

reset() {
  this.minutes = 24;
  this.seconds = 59;
  this.buttonLabel = 'Start';
  this.togglePause();
}

By executing togglePause() every time, we reset it the to make sure that whenever it reaches a state where it requires to be reset, the countdown behavior will switch to the opposite state it had previously. There is only one tweak left in the controller method that handles the countdown:

private tick() {
  if(!this.isPaused) {
    this.buttonLabel = 'Pause';
    if(--this.seconds < 0) {
      this.seconds = 59;
      if(--this.minutes < 0) {
        this.reset();
      }
    }
  }
}

Obviously, we do not want the countdown to continue when the timer is supposed to be paused, so we wrap the whole script in a conditional. In addition to this, we will want to display a different text on our button whenever the countdown is not paused and once again when the countdown reaches its end; stopping and then resetting the Pomodoro to its initial values will be the expected behavior. This reinforces the need of invoking the togglePause function within resetPomodoro.

So far, we have reloaded the browser and played around with the newly created toggle feature. However, there is apparently something that still requires some polishing: when the seconds counter is less than 10, it displays a single-digit number instead of the usual two-digit numbers we are used to seeing in digital clocks and watches. Luckily, Angular implements a set of declarative helpers that format the data output in our templates. We call them pipes, and we will cover them in detail later in Chapter 4, Implementing Properties and Events in Our Components. For the time being, let's just introduce the number pipe in our component template and configure it to format the seconds output to display two digits all the time. Update our template so that it looks like this:

@Component({
  selector: 'timer',
  template: `
    <h1>{{ minutes }}: {{ seconds | number: '2.0' }}</h1>
    <p>
      <button (click)="togglePause()">{{ buttonLabel }}</button>
    </p>
  `
})

Basically, we appended the pipe name to the interpolated binding in our template separated by a pipe (|) symbol, hence the name. Reload the template and you will see how the seconds figure always displays two digits, regardless of the value it assumes.

We have created a fully functional Pomodoro timer widget that we can reuse or embed in more complex applications. Chapter 6, Building an Application with Angular Components, will guide us through the process of embedding and nesting our components in the context of larger component trees.

In the meantime, let's add some UI beautification to make our component more appealing. We already introduced a class attribute in our button tag as an anticipation of the implementation of the Bootstrap CSS framework in our project. Let's import the actual style sheet we downloaded through npm when installing the project dependencies. Open timer.html and add this snippet at the end of the <head> element:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Now, let's beautify our UI by inserting a nice page header right before our component:

<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <strong class="navbar-brand">My Timer</strong>
      </div>
    </div>
  </nav>
</body>

Tweaking the component button with a Bootstrap button class will give it more personality and wrapping the whole template in a centering container will definitely compound up the UI. So let's update the template in our template to look like this:

<div class="text-center">
  <img src="assets/img/timer.png" alt="Timer">
  <h1> {{ minutes }}:{{ seconds | number:'2.0' }}</h1>
  <p>
    <button class="btn btn-danger" (click)="togglePause()">{{ buttonLabel }}</button>
  </p>
</div>