Learn Angular for Back-End Developer (Part 1) – Getting Started

A quick start guide to create your first Angular application

Photo by Tim Mossholder on Unsplash

If you are a Back-End developer and you want to become a Front-End developer, you must learn HTML, CSS and JavaScript.
Of course, as a Back-End developer, you are familiar with advanced concepts like: Object-Oriented Programming, Services, Dependency Injection, Web API, Error Handling, Unit Testing and so on. That’s why you need a real Front-End framework to use all your Back-End skills to build client applications in HTML, CSS and JavaScript.

I think you guessed it, Angular is what you need to achieve this.

Angular logo

What is Angular ?

Angular is a framework for building client applications in HTML, CSS and Typescript, note that Typescript is a superset of JavaScript, which allows developers to write sophisticated code like C # or Java. One important thing, Angular is led by the Angular team at Google.
With Angular, you have everything you need to build a client web application from scratch.

Let me show you in the next chapter, how easy it is to set up a development environment and build your fist angular application.

Set Up the Development Environment

First, we need to install node-js, Node provides a runtime environment to execute JavaScript outside the browser. Node comes with npm (node package management).

Download | Node.js

Then, we need to install some packages with npm like Angular CLI. Angular CLI stands for Angular Command Line Interface . it’s a command line tool for creating angular projects, components, pipes or services it also helps deploy applications.

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

To check if our environment is ready, run the following command:

ng --version

Now, your can create a new angular project named hello-angular like this:

ng new hello-angular --routing=false --style=css

Note here that I’m using ng new command with two options,--routing=false and --style=css. The first one is for adding routing support and the second is for choosing a stylesheet extension. For simplicity in this stage, I am not going to use routing module, so I typed false for this option, I will discuss routing in future articles.

The Angular CLI includes a local server, so to load your application in a server locally, change your working directory to hello-angular and type ng serve like this:

cd hello-angular
ng serve

Now, you have a live development server listening at: http://localhost:4200.

To test your application, open your browser and go to http://localhost:4200, you should see a page similar to the following:

Congratulations, you have successfully completed your first angular application.

In the next chapter, I’m going to show you the basic structure of an angular project.

Structure of Angular Project

To start coding with angular, we need a code editor, Visual Studio Code or vscode is a lightweight cross platform editor, made by Microsoft. vscode is available here:

Visual Studio Code — Code Editing. Redefined

To open your new project hello-angular in vscode, change your working directory to hello-angular and type code . Like this:

cd hello-angular
code .

Our project open in vscode

Now let’s give you a breve explanation of files and folders in this new project.

• e2e: this folder stands to end to end tests, it contains end-to-end test files.
• node_modules: this folder is used by the angular framework to store all the third-party libraries that the application depended on. This folder is purely for development. After compilation, some of these libraries are put in a bundle and deployed with the application.
• src/app: this folder contains the actual source code of the application. Inside this folder we have at least one module and one component.
• src/assets: this folder contains the static assets of the application, like images, text files and icons.
• src/environments: this folder contains configuration settings for different environment.
• favicon.ico: the icon displayed in the browser.
• index.html: a simple html file that contains the angular application. Note here we don’t have any references to scripts or stylesheets these references will be dynamically inserted.

index.html

• main.ts: a typescript file, which is the starting point of the application. This file is responsible for bootstrapping main Modules of the application.
• polyfills.ts: this typescript file imports some scripts that are required for running angular because angular uses features of Javascript that are not available of the version of javacript supported with browsers.
• style.css: global stylesheet for the application.
• test.ts: this typescript file is used for setting the test environment
• .browserslistrc: this file is used by the build system to adjust CSS and JS output to support specified browsers.
• .editorconfig: the editor configuration file. All the team working on the same project must have the same setting configuration to avoid commit problems.
• .gitignore: this git file is used to exclude certain files and folders from your git repository.
• .angular-cli.json: configuration file for angular cli.
• karma.conf.js: configuration for karma, which is a test runner of javascript code.
• package-lock.json: contains the exact version of each installed package which allows you to re-install them.
• package.json: this file contains basic settings of the application like name and version. It also contains global dependencies for running the application and development dependencies that we need in order to develop the application.
• README.md: a basic read me file.
• tsconfig.app.json: this file contains some settings of typescript compiler.
• tsconfig.json: provides the base typescript compiler options that different config files derive from.
• tsconfig.spec.json: this file contains the typescript configuration for the application tests.
• tslint.json: this file includes a number of settings of tslint. TSLint is a static analysis tool that checks typescript code.

The last thank I want to show you is Angular compiler.

Angular Compiler

Angular compiler, webpack, gets all project files, combines and bundles them and minimizes these bundles for optimization.

Angular compilation project

If the compilation success, five bundles will be created :

1- main.js and main.js.map: contain all source code of the application.

2- polyfills.js and polyfills.map.js: contain all scripts that are required for running angular.

3- runtime.js and runtime.map.js: contain all the code webpack needs to connect application module while it’s running in the browser.

4- styles.js and styles.map.js: contain all style sheets of the application.

5- vendor.js and vendor.map.js: contain used third-party libraries.

These bundles are automatically injected as scripts in “index.html”

index.html with bundles

Alright, it’s the end of this first part of “Learn Angular for Back-End Developer”, in my next article I will cover the basics of the typescript necessary for an Angular developer:

Learn Angular for Back-End Developer (Part 2) -Typescript Fundamentals

Thanks for reading.

Learn More / Resources

Angular