Image 14282+ users

Install and Setup Angular in Ubuntu 18.04

Install and Setup Angular in Ubuntu 18.04

29/04/19   15 minutes read     1700 Naren Allam

In this article, we are going to see Angular installation in Ubuntu 18.04 and the basic setup required for developing any single-page web application.


Angular is a structural framework for dynamic web apps. It is a JavaScript opensource framework which helps in developing single page web applications suitable for web/mobile/desktop.

Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Angular applications are based on Typescript. Typescript is strong typed and so, it helps to alleviate run-time errors where you thought a variable was one type but is actually another. Typescript uses classes and objects making code more readable. Typescript transpiles to plain Javascript so you applications will work in any browser.

To build applications that live on the web, mobile, or the desktop, we need to install Angular and other dependencies.

First, open a terminal to create a folder 'dev' and navigate into that folder in which you want to store your projects. To do so, run commands

BASH  Copy
                    
                      $ mkdir dev 

$ cd dev 
                    
                  

Since Angular is a JavaScript framework, it requires to have Nodejs(A JavaScript runtime) installed. To install Nodejs, run the following commands

BASH  Copy
                    
                      $ sudo apt-get install software-properties-common
$ sudo apt-get install -y curl 
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs
                    
                  

Next, we have to install Node Package Manager(NPM). To install it, run the command

BASH  Copy
                    
                      $ sudo apt-get install npm
                    
                  

After Node Package Manager(NPM) installed , we need to update it to the latest version. To do this, run the command

BASH  Copy
                    
                      $ sudo npm install npm@latest -g
                    
                  

Now we have to install Angular CLI.

Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
It can be simply installed using npm, by running the command

BASH  Copy
                    
                      $ sudo npm install -g @angular/cli
                    
                  

To check that it installed correctly, run the command

BASH  Copy
                    
                      $ ng --version
                    
                  

It will give you output like this

Once complete, you can now access the CLI by simply starting any commands with 'ng'.

ng new

The ng new command creates an Angular workspace folder and generates a new app skeleton. A workspace can contain multiple apps and libraries. A newly generated app contains the source files for a root module, with a root component and template. Each app has a src folder that contains the logic, data, and assets.

ng generate

ng generate command to add new files for additional components and services, and code for new pipes, directives, and so on. The CLI will also create simple test shells for all of these.

ng serve

ng serve command easily test your app locally while developing.

The Angular CLI makes use of git to pull down required modules so we need to make sure we have git configured.

If you have not configured the git user name and email, then run commands

BASH  Copy
                    
                      $ git config --global user.email "Your_email_id"  

$ git config --global user.name "Your_name"
                    
                  

Now run the following command to create a new Angular project 'my-app'.

BASH  Copy
                    
                      $ ng new my-app
                    
                  

Here "my-app" is my Angular project name.

The above command creates a project folder with the name "my-app".

The command will ask you several questions. The first question asks you if want to use Angular routing.

Like this

BASH  Copy
                    
                      ? Would you like to add Angular routing? (y/N) . 
                    
                  

Type 'y' and press 'Enter'.

The next question asks you what stylesheet formatting to use.

Like this

BASH  Copy
                    
                      ? Which stylesheet format would you like to use? (Use arrow keys)
   CSS 
   SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
❯ Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html ] 
   Less   [ http://lesscss.org ] 
   Stylus [ http://stylus-lang.com ]  


                    
                  

Here, select 'Sass' and the installation process will begin pulling down required Angular modules and created the directory structure for our new application 'my-app'.

Now navigate to your project folder 'my-app' by typing the command

BASH  Copy
                    
                      $ cd my-app 
                    
                  

Now to run the application development server using the Angular CLI, run the command

BASH  Copy
                    
                      $ ng serve -o
                    
                  

Here, -o (--open) is for open, this flag will open your default browser at http://localhost:4200.

Then you will see a message in the terminal like this

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

In the browser, your app greets you with a message:

The most basic building block of your Angular application is the component.

A component consists of three primary elements:

The HTML template
The logic
The styling (CSS, Sass, Stylus, etc..)

When we use the Angular CLI to start a new project, it generates a single component, which is found in /src/app/:

/app.component.html
/app.component.scss
/app.component.ts

While we have three files here that represent the three elements above, the .ts (TypeScript) is the heart of the component.

Let's take a look at that file:

TYPESCRIPT  Copy
                    
                      import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
}

                    
                  

Here, because this is a component, we're importing Component from the @angular/core library, and then it defines what's called a @Component decorator, which provides configuration options for that particular component.

As you can see, it's referencing the location of the HTML template file and the CSS file with the templateUrl property and the styleUrls property.

The logic of the component resides in the class at the bottom. As you can see, the CLI starter template simply defines a single property called title.

Let's use the Angular CLI to create our own components that we'll need going forward. In the terminal, issue the following command:

BASH  Copy
                    
                      $ ng generate component fileupload 
                    
                  

or

BASH  Copy
                    
                      $ ng g c fileupload 
                    
                  

Notice we first use the full syntax to generate a component, and then we use a shorthand syntax, which makes it a little bit easier to use. The commands do the same thing: generate components.

When we generate components this way, it will create a new folder in the /src/ folder based on the name we gave it, along with the respective template, CSS, .ts and .spec (for testing) files.

In Visual Studio Code, you will see all the folder(s)/file(s) created.

Now, let’s walk through the anatomy of our Angular app. The cli setup procedures install lots of different files as you can see. Most of them can be safely ignored.

In the project root , we have some important files:

/src/

  This is the most important folder. Here we have all the files that make our Angular app.

/e2e/

  This folder is for the End-to-end tests of the application, written in Jasmine and run by the protractor e2e test runner.

nodemodules/

  The npm packages installed in the project with the npm install command will be stored here.

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.

tsconfig.json

  Main configuration file. It needs to be in the root path as it’s where the typescript compiler will look for it.

Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Angular app will take place.

When we run ng serve, our code inside of /src gets bundled and transpiled into the correct Javascript version that the browser understands. That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript that the browser needs.


Under /src/ folder, you will find two main folder structures.

/app

  It has all the components, modules, pages you will build the app upon.

/environments

  This folder is to manage the different environment variables such as dev and prod.

For example we could have a local database for our development environment and a product database for production environment.
When we run ng serve it will use by default the dev env.

If you like to run in production mode you need to add the --prod flag to the ng serve.

And there are other secondary but also important folders/files.

index.html/

  It’s the app host page but you won’t be modifying this file often, as in our case it only serves as a placeholder.
All the scripts and styles needed to make the app work are gonna be injected automatically by the webpack bundling process, so you don’t have to do this manually. The only thing that comes to my mind now, that you may include in this file, are some meta tags (but you can also handle these through Angular as well).

/assets

  In this folder you will find images, sample-data json’s, and any other asset you may require in your app.


The app folder:-

  This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.

app.component.html

  This serves as the skeleton of the app. Typically has a to render the routes and their content. It can also be wrapped with content that you want to be in every page (for example a toolbar).

app.component.ts

  It’s the Angular component that provides functionality to the app.component.html file I just mentioned about.
app-routing.module.ts

  Here we define the main routes. These routes are registered to the Angular RouterModule in the AppModule. If you use lazy modules, child routes of other lazy modules are defined inside those modules.
app.module.ts

  This is the main module of the project which will bootstrap the app.
app.component.spec.ts

  This is the test file for the AppComponent generated by CLI. The app.component.ts and app.component.spec.ts files are siblings in the same folder. The root file names (app.component) are the same for both files.

As part of the initial app, the CLI created the first Angular component for you. It is the root component, and it is named 'app-root'. You can see it in visual studio code which you opened.

Now, open ./src/app/app.component.ts

Change the title property from 'my-app' to 'My First Angular App'.

TYPESCRIPT  Copy
                    
                      import { Component } from '@angular/core';

		@Component({
		  selector: 'app-root',
		  templateUrl: './app.component.html',
		  styleUrls: ['./app.component.scss']
		})
		export class AppComponent {
		  title = 'My first Angular Project';
		}
                    
                  

Then, the browser reloads automatically with the revised title.

To make it look better, open ./src/app/app.component.css and give the component some style.

TYPESCRIPT  Copy
                    
                      h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
                    
                  

Now, we need to configure animations and import the component modules. For this first we need to install Angular Material and Angular CDK

BASH  Copy
                    
                      $ npm install --save @angular/material @angular/cdk
$ ng add @angular/material
                    
                  

Some Angular Material components use animations so we need to add support for animations in our Angular front-end application in order to enable those animations.

BASH  Copy
                    
                      $ npm install --save @angular/animations
                    
                  

Angular Material is the implementation of Material Design for Angular. It offers a plethora of components and patterns for navigation, forms, buttons and layouts. It is inspired by the Google Material Design.

What is Material Design?

Material Design is a design language created by Google in 2014. It dictates a set of principles and guidelines for creating UIs including motion (animations) and interaction (gestures).

Why to use Angular Material?
Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites.So, to add Angular Material quickly use the "ng add" command. This method only works with Angular 6+.

Angular Component Development Kit is comprised of a bunch of services, directives, components, classes, modules, etc to make our lives easier when developing Angular components. They included features for accessibility, text directionality, platform detection, and dynamic component instantiation.

Angular animations allows us to create animations which provides us similar native performance as CSS animations. Animations add a lot of interaction between the html elements.

Once the animations package is installed, import BrowserAnimationsModule into your application to enable animations support and also Import the NgModule for each component you want to use.

To do this, open app.module.ts and add the following

TYPESCRIPT  Copy
                    
                                      ...
		import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
		import { MatInputModule, MatButtonModule } from '@angular/material';
		....
		@NgModule({
		  ....
		  imports: [
			BrowserAnimationsModule,
		  	.....
		],
		  ...
		})
                    
                  

Then, include a theme required to apply all of the core and theme styles to your application.

 To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

TYPESCRIPT  Copy
                    
                      @import "~@angular/material/prebuilt-themes/indigo-pink.css";
                    
                  

Now open app-routing.modules.ts and replace Routes =[ ] with the following

TYPESCRIPT  Copy
                    
                      const routes: Routes = [{path:'', component:FileuploadComponent}];
                    
                  

Conclusion:

In this article, I have explained you the basic setup for development environment of Angular in Visual Code step by step. Hopefully, it will help you to understand.


1 Comments
raghavendra

    thanks for posting on angular setup