Getting Started with Angular

Introduction

Angular 9, the latest version of Angular is out now, and developers have sound reasons to be excited. Angular is a single-page application (SPA) development framework for well-structured, testable, and maintainable front-end applications. It is one of the most widely used application frameworks in the world.

Angular’s popularity is due to its compatibility across platforms. Apps written with Angular can run on the web, natively on mobile and desktop platforms.

Today in this article, we will cover below aspects,

Prerequisites

Node: Install the latest version of Node.js

(You need Node.js 10.x and above ). Please install it from here.

IDE: Visual Studio Code or other IDE is highly recommended. Install Visual Studio Code from here.

After installing Node.js, open a command prompt and run the following set of commands to check the version of node and npm installed on your machine. Installing node.js will also install npm on your machine.

node -v

npm -v

Installing the Angular CLI

Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop and maintain Angular applications easily.

To install Angular CLI, run the following command in the command window:

npm install -g @angular/cli

To check the version of angular CLI installed in your machine, run following command:

ng –version

Create Your Angular 8 App

• Create a new folder and name it ‘MyFirstAngular8App’. This is where we will create our project.
• Open this folder in Visual Studio Code.

• Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open a terminal window.

• Run the CLI command ng new and provide the name my-app, as shown here:

ng new my-app

As you run the ng new command, Angular CLI will ask you to add routing and stylesheet:

1. Would you like to add Angular routing? (y/N)
2. Which stylesheet format would you like to use?

We have chosen ‘y’ for routing and CSS as our stylesheet.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

When completed, you can see the following file structure in Solution Explorer.

• Open package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

Angular Project Structure

As you can see below, there are quite a few numbers of files in the application folder. You can safely ignore most files but let’s explore the main folders and files in our newly generated Angular project.

Root Folder

• src
  • Source folder is where we keep all files that make up the app – this is the most important folder.
• e2e
  • A folder for keeping end-to-end tests, written in Jasmine and run by the protractor e2e test runner.
• node_modules
  • A folder to store all installed dependencies from npm. This folder is auto-generated when you create an app for the first time or run npm install on a different machine. This folder is huge so never put this folder in source-control.
• angular.json
  • This is a configuration file that tells the build system which files to change when you use commands like ng build and ng serve.
• package.json
  • As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules our app uses. Inside this file, you will find all the dependencies and some other handy stuff like the npm scripts that will help us a lot to orchestrate the development (bundling/compiling) workflow.
• package-lock.json
  • This is automatically generated for any operations where npm modifies either the node_modules tree or package.json.
• tsconfig.json
  • Typescript configuration file.
• tslint.json
  • Configuration for static analysis linter for the TypeScript language.

‘src’ Folder

You’ll be working with the files inside the src folder 99.9% of the time. Let’s see what’s inside.

• app
  • This is where all the juicy stuff goes into. You will create all the components, modules, views and services in this folder.
• assets
  • Static text files, JSON files, images should be in here.
• environments
  • This folder is to manage different environments such as development and production. For example, we could have a local API for the development environment and a live API for the production environment. When we run ng serve it will use the default development environment. If you like to run in production mode you need to add the –prod flag to ng serve command.
• styles.css
  • Global style sheet file.
• index.html
  • This is the host page of our Angular app. It will serve as the placeholder and you won’t be changing this file often. The angular compiler will inject all required JS, HTML and CSS files into this file automatically with a webpack.

You may have noticed that all these files are configuration files that work out of the box. You don’t ever have to modify them, unless you have a specific requirement to implement for your environment.

Angular Application Architecture

So, we now know how to generate a new Angular application and the most important files & folders in the app.

Let’s learn about Angular application architecture.

There are three fundamental building blocks in Angular applications:

• Components
• Modules
• Services

If you look at the app folder under src, you’ll notice it has a few files.

• App Component
  • app.component.ts
  • app.component.html
  • app.component.css
  • app.component.spec.ts
• App Routing Module
  • app-routing.module.ts
• App Module
  • app.module.ts

Run the Application

The Angular CLI includes a server, so that you can easily build and serve your app locally.

• Go to the workspace folder (my-app).
• Launch the server by using the CLI command ng serve, with the –open option.

Commands:

cd my-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The –open (or just -o) option automatically opens your browser to http://localhost:4200/.



Form Basics in Angular

Angular Forms Module

In the app.module.ts, add the FormsModule in imports.

Creating a Form Component

We will name our new component as ‘user-settings-form’.

• Open the terminal window and execute the below command to generate a new component.

ng g c componentName

• Open user-settings-form.component.ts. Copy the selector and add it in the app.component.html (delete the boiler-plate code in app.component.html).

Using Bootstrap for Styling

• Open a terminal window and run the below command:

npm install –save bootstrap

• Open angular.json and add bootstrap in ‘styles’ as shown below:

Add the below code in user-settings-form.component.html:

[cc lang =’html5′] [/cc]

At this point, run your angular app using below command to see your form in the browser.

ng serve –o

User Interface

Source Code Available on GitHub

Please find the code for this app in the below location:

git clone https://github.com/thecodebuzz/angular-8-getting-started-ivy

Summary

In this article, we learned how to create and run an Angular 8 application. We went through some basics of the Angular Project structure.

We saw how to create new components, add packages to your project and add form basic components.

In the next few articles, we will cover Data Binding in Angular Forms, Form Validation, and usage of services.

---

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.

---