Angular for Kids

Start Your Coding Adventure

Abdelfattah Ragab

Introduction

Welcome to the book “Angular for Kids: Start your Coding Adventure”.

This book is your introduction to the world of Angular. It's your first step towards developing websites and mobile applications. With Angular, you can turn your ideas into reality. Learning should be fun, so you will feel like you are reading a story.

By the end of this book, you will have a good understanding of Angular. You will have taken the first steps in your modern web programming adventure.

Have fun programming!

Move forward

When you start a new topic, you should explore it broadly and focus on moving forward without getting lost in the details. I also recommend that you gather information on the same topic from different sources.

Take breaks from time to time, look for short answers to questions, and use different sources to get different perspectives. Don´t worry if you still don't understand after many attempts, just keep going because you will come across it again later.

What is Angular?

Angular is a platform for the development of web applications. It is maintained by Google and is designed to help developers create robust applications.

What are web applications?

A web application is a type of application software that is accessed via a web browser. It is delivered over the World Wide Web and requires an active Internet connection to function.

Constituents of a Web Application

A web application consists of two parts that work together to provide functionality and a seamless user experience.

There is a client-side part of the application that runs in the user’s browser. It processes user interactions, dynamically updates the user interface and communicates with the server to retrieve or send data.

The other part is the server side. It performs operations such as data retrieval or manipulation and sends responses back to the client.

Angular belongs to the first part. It is a client-side framework.

We use Angular to create the user interface and to communicate with the server.

HTML, CSS and JavaScript

Engineers like to separate topics to have more control over each one. The web page you visit is made up of three technologies that together make up the final result we see when we open a web page online; HTML, CSS and JavaScript.

HTML defines the content of the page. It determines what should be in the header, main content, footer, etc.

The second technology is CSS. It is responsible for the styling of the page. It determines the font size, the color and so on.

The last technology is JavaScript. It allows you to interact with the page to trigger events, execute logic and so on.

When you create an Angular component, three files are created for all these technologies. One for the HTML, one for the CSS and one for the TypeScript (similar to JavaScript).

A fourth file is created for testing, but this is optional and is not needed in most cases.

What is TypeScript?

TypeScript is a programming language developed by Microsoft to help developers detect errors during development rather than at runtime.

Before your application is sent to the browser, Angular converts everything to JavaScript. Browsers do not understand Typescript, they only understand JavaScript.

Install Angular

The installation of Angular consists of only two steps:

First, NodeJS must be installed. Search online for nodeJS, download it and install it.

Secondly, open the terminal and run the command npm install -g @angular/cli

What is NodeJS?

Node.js is a JavaScript runtime environment that allows developers to execute JavaScript code outside of a web browser. It comes with NPM, a package manager that makes it easy for developers to share and reuse code.

If a developer creates a package that I need to use in my application, I just write the name and npm installs it for me. I can use it immediately without having to develop it from scratch. This of course speeds up the development process.

What is terminal?

A terminal is a text-based interface that allows users to interact with the operating system by entering commands.

It can take many forms, but ultimately it is a text-based interface through which you can execute commands.

Windows has many terminals that you can use. There is “Windows PowerShell“, “Command Prompt” and you can also install “Git Bash”.

Mac and Linux also have the “Terminal” application.

Angular Version

To ensure that the installation was successful, you can check the current node version. Open the terminal and execute the command node -v. The version of NodeJS installed should be displayed.

Also check the installed version of npm. Execute the command npm -v

This is the version of npm.

The last version to check is the version of Angular.

Execute the command ng version

Visual Studio Code

Visual Studio Code (VS Code) is a free code editor developed by Microsoft for creating modern web applications.

Search online for Visual Studio Code, download and install it.

First Angular Application

To create a new Angular application, open the terminal and run the command ng new followed by your project name. For example:

ng new first-app

You will be asked for the stylesheet format and whether you want to activate SSR. Simply press the Enter key.

The project will be created in the current folder. In Windows, you can type “cmd” in the address bar and press Enter to open the terminal in the current folder. If you now execute the command ng new first-app, a new Angular application is created in the currently open folder.

Available on https://shop.tredition.com and https://www.amazon.com