Getting started with Angular 15

Updated : 27/12/22 danny

What are we going to do?

We are going to build a Web Application with Angular 15.0.4

This is Step 1 of our Angular guide which will allow us to obtain a PWA type Web Application.
We will start from scratch and try to follow Angular's best practices.
Our Angular guide describes each step of this application.

All created sources are indicated at the end of the tutorial.

The application is at the following address

How to do it ?

The summary of what we are going to do

  • Before you start
    We will talk frontend and backend and why choose Angular.
  • The tools needed
    All we will use to create our application.
  • Initialization of the project
    How to use Angular CLI
  • Visual Studio Code
    Why and how to use this code editor
  • Update the project
    Check the dependencies.
  • Perform the tests
    Unit et end tot end.
  • Déployment
    How to deploy the application on the internet.
  • Code source
    For the most in a hurry the complete code of the project on github.

    Just go to the following address
    https://github.com/ganatan/angular-example-starter

Before you start

The development of a Web application is divided into two parts

  • the front-end part :
    This is the part visible by the user, the one we see in the browser.
    It usually uses CSS, HTML and Javascript languages.
    It concerns the design of the website, the graphic elements, the UX, the UI.
    Tools and development techniques are constantly evolving.
     
  • the back-end part :
    It corresponds to the non-visible part.
    It is often opposed to the frontend, which is the tip of the iceberg.
    It concerns elements like the server, the database, the administration, the security ...

The classic but simple example of a shop will allow us to understand the concept.
Imagine a video-club (competing with the VOD it almost does not exist anymore unfortunately)

As a customer

  • We enter the store to choose our DVDs and be advised by our favorite seller, this is the front-end.
  • We never go into the back shop where DVD storage and supply is managed, it's back-end

Front-end developer tools are extremely numerous.
Difficult under these conditions to know which framework to choose.

Let's mention some javascript Frameworks among the known

  • Ember
  • Backbone
  • Meteor
  • Polymer

But since a few years 3 Javascript frameworks dominate without sharing the frontend development.

  • React (Created by Facebook on May 29, 2013)
  • Vue (Created by Evan You on February 11, 2014)
  • Angular (Created by Google on September 14, 2016)

Angular is an open source javascript framework based on TypeScript.
It was developed by the Angular project team at Google.
Angular has succeeded AngularJS, of which he is a complete rewrite.

Successive versions were as follows :

  • AngularJS version 1.0.0 was released in June 2012.
  • AngularJS version 1.7.5 was released in October 2018.
  • AngularJS version 1.7.8 was released in March 2019.
  • AngularJS 1.7 LTS Period will end on June 30, 2021.
     
  • Angular 2.0.0 was released on September 14, 2016.
  • Angular 4.0.0 was released on March 23, 2017.
  • Angular 5.0.0 was released on November 1, 2017.
  • Angular 6.0.0 was released on May 4, 2018.
  • Angular 7.0.0 was released on October 18, 2018.
  • Angular 8.0.0 was released on May 29, 2019.
  • Angular 9.0.0 is released on February 7, 2020.
  • Angular 10.0.0 is released on June 25, 2020.
  • Angular 11.0.0 is released on November 12, 2020.
  • ​​​​​​​Angular 12.0.0 is released on May 13, 2021.
  • Angular 13.0.0 is released on November 3, 2021.
  • Angular 14.0.0 is released on June 2, 2022.
  • ​​​​​​​​​​​​​​​​​​​​​Angular 15.0.0 is released on November 16, 2022.

The tools needed

The tools we will use to do this tutorial are

  • Angular version 15.0.4
  • Angular-cli version 15.0.4
  • Visual studio code version 1.74.0
  • Typescript version 4.8.2
  • Node.js version 18.12.1 LTS (Long Term Support)
  • npm (node package manager) version 9.2.0

The latest versions of these tools are available below

Before starting to use Angular we will first have to install Node.js and npm.

Initialization

Angular is a complete framework that covers a lot of features.
The documentation is particularly detailed and provided.

We will try as much as possible to respect the best practices recommended by the angular team.

We will use for this purpose one of the tools put at our disposal by the Angular team.

This tool is called Angular CLI (Command Line Interface).
Angular CLI is a tool to initialize, develop and maintain Angular applications.

The installation procedure is detailed on the Angular official website https://angular.io/cli

- If a previous version was installed on your computer, you can uninstall it with the following command


# Uninstalling angular-cli
npm uninstall -g @angular/cli
  • Install angular-cli in global on your post.
    During the installation you will be able to accept or not to share anonymous data with the Angular team.
    The default answer is No.
    You can install a specific version of angular or install the latest available by default.
     
  • Check the installed version.

# Installing angular-cli latest version available
npm install -g @angular/cli

# Installation of angular-cli specific version
npm install -g @angular/cli@13.1.2

# Installed version test
ng --version

The documentation for Angular CLI commands is as follows
https://github.com/angular/angular-cli/wiki

The command we will use is ng new or ng n

- Generate the project (in our example we will arbitrarily choose angular-starter)

  • For a simpler understanding we will manage the routing and the sass in another tutorial.
  • Answer no for routing
  • Choose the CSS type

- Position in the project
- Run the project


# Generate a project called angular-starter with manual choice of options
ng new angular-starter

# Generate a project called angular-starter with default options
ng new angular-starter --defaults

# Position yourself in the project
cd angular-starter

# Run
ng serve

# Run and automatically launch the application in the browser
ng serve -o

Angular CLI via the ng serve command runs the project on a default port (4200).

It only remains to test the operation in a browser by launching the following url.


# Test
http://localhost:4200

Visual studio code

There are many code editors to develop an application.
Among the most famous we could quote

  • Atom
  • Sublime Text
  • Brackets
  • Visual Studio Code

Visual Studio Code is the editor used in most Angular conferences.
It is used in particular by John Papa one of the best Angular speakers and author of Angular guides
https://github.com/johnpapa/angular-styleguide

In the rest of the tutorial we will use Visual Studio Code.
VS code is a code editor developed by Microsoft for Windows, Linux and OS X.

After launching VS code, open a folder in the angular-starter directory.
Then open the package.json file.
This contains a number of commands (or scripts) that we will use throughout this tutorial.

Open a VS code console (select View / Terminal) to run the following scripts

  • npm run  start : Execute the application in development mode.
  • npm run  build : Compile the application in the dist directory.
  • npm run  test : Execute unit tests using the Karma framework..​​​​​​​

In development mode if we want to customize the port just modify the start script in the package.json file.
For example to use port 4201 the script would be the following "start": "ng serve --port 4201"

We will leave port 4200 editable at will for the rest of the tutorial.

Note: 
The ng eject command (to generate the webpack configuration) has been disabled.
It will be removed from the next Angular 9 release.
It has been removed since version 8.
Projet exemple de gestion du format de configuration
https://github.com/manfredsteyer/ngx-build-plus

package.json
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Updates

The package.json file contains the different dependencies of your project.
The dependencies are somehow all the libraries that you have decided to use in your project.
They are managed by npm the node package manager.

Regarding the dependencies and their version the documentation npm is the following.
https://docs.npmjs.com/files/package.json#dependencies

Version specifiers are numerous.

We can use for example

  • version Must match version exactly
  • ~version  “Approximately equivalent to version” 
  • ^version  “Compatible with version”

We will obtain the first version specifier, which is the simplest, most explicit but also the most restrictive.

We will update the package.json file with the latest dependencies

- To control the dependencies to update start the command
npm outdated 

- All dependencies can be updated except rxjs.

- Edit the package.json file as follows and then run the script
npm install

package.json
  "dependencies": {
    "@angular/animations": "15.0.4",
    "@angular/common": "15.0.4",
    "@angular/compiler": "15.0.4",
    "@angular/core": "15.0.4",
    "@angular/forms": "15.0.4",
    "@angular/platform-browser": "15.0.4",
    "@angular/platform-browser-dynamic": "15.0.4",
    "@angular/router": "15.0.4",
    "rxjs": "7.8.0",
    "tslib": "2.4.1",
    "zone.js": "0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.0.4",
    "@angular/cli": "15.0.4",
    "@angular/compiler-cli": "15.0.4",
    "@types/jasmine": "4.3.1",
    "jasmine-core": "4.5.0",
    "karma": "6.4.1",
    "karma-chrome-launcher": "3.1.1",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.0.0",
    "typescript": "4.8.2"
  }

Tests

Let's do the debugging, the tests and the transition to production.

- Debugage.
Any modification causes a recompilation of the code.


# Run
npm run start

# Test
http://localhost:4200/

For example Edit the app.component.html file
<p>Modifications : Here are some links to help you get started:</p>

The compilation is then executed automatically and the browser is refreshed.

Note :
The favicon.ico file is incorrect. Consider putting a correct one.
For example, get the one from this repository
​​​​


# Code analysis
npm run lint

# Unit tests
npm run test

# End to end tests 
npm run e2e

- Compilation


# Compile
npm run build