Angular, install this open source framework on Ubuntu

about install Angular

In the next article we are going to take a look at Angular. Next we will see how we can install this open source JavaScript framework which will assist us in developing suitable web / mobile / desktop single page web applications.

This is a framework that makes it easy to create web applications. Angular combines templates, dependency injection, end-to-end tools, and built-in best practices to solve development challenges. Angular applications are based on typescript which in turn is based on Javascript.

Angular general features

Deployed web application

  • Angular is one of the most used Javascript frameworks to create web applications.
  • This framework can work with pure JavaScript, but using Typescript enhances its features and is the recommended option for most projects. Especially thinking about its scalability.
  • Angular converts templates into code that is highly optimized for today's JavaScript virtual machines.
  • Will allow us serve first view of applications in Node.js, .NET, PHP and other languages to render almost instantaneously only in HTML and CSS.
  • Angular apps load quickly with the new Component Router. This offers automatic code splitting for users to just load the code required to render the view they request.
  • We will be able to quickly create user interface views with a simple and powerful template syntax.
  • Hen/Stag Angular CLI command line tools They will allow us to quickly start building, adding components, and testing.

These are just a few general features. It can get more information about them in the project website.

Install Angular on Ubuntu 18.04 LTS

First of all we are going to have to make sure all packages in our system are up to date. To do this, all you have to do is open a terminal (Ctrl + Alt + T) and run the following script:

sudo apt update; sudo apt upgrade

Installation of NodeJs and NPM

node js logo
Related article:
NodeJS, install this runtime environment for JavaScript on Ubuntu

Before proceeding to the installation of Angular in Ubuntu 18.04, we will have to install NodeJs and Node Package Manager (NPM). To do it in the same terminal we will execute the following lines:

curl nodejs

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

sudo apt-get install -y nodejs

After finishing the installation of NodeJs we proceed to the installation of NPM:

npm install latest -g

sudo npm install npm@latest -g

Install Angular CLI on Ubuntu

Now we will install the Angular CLI using NPM:

install angular

sudo npm install -g @angular/cli

After the installation is complete, check that it was installed correctly with the command:

check framework installation

ng --version

Git configuration

Angular CLI uses git to deploy the necessary modules, so we need make sure we have git configured. If you haven't set up your git username and email, run the following commands to do so:

git config --global user.email "correo@electronico.com"
git config --global user.name "usuario"

Creating a new angular application

Now that we have Angular installed, we can generate a “basic structure” to create a new application. We will be able to achieve this using the CLI that we have just installed:

ng new nombre-aplicacion

The above command will create a new application with the name we pass. This command will ask us several questions. The first is if you want to use routing.

sample application setup

For this example I am going to select No. The next question asks what stylesheet format you should use. For this example we will select CSS (the default) by pressing Enter.

The installation process will begin to deploy the necessary modules and create the directory structure for our application.

Launch Angular App

At this point, we are going to change to the directory just created for our application:

cd nombre-aplicacion

Here we can run our application easily using the NPM command:

launching the sample app

npm start

The previous command us will put on the screen a link that will tell us how we can see our application.

These are just the most basic first steps you can take with Angular. It can get more information about this framework in the official documentation that they have published on the project website.


Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Juan Carlos said

    Thank you very much for the guide ... It helped me this was what I needed