An overview of Angular; Additional useful links

3 min readDec 27, 2020

--

Learn how to generating and serving an Angular project.

—

In this article, we are going to have a look at how we can start the application by using the Angular Command Line Interface or CLI, Creating Your Application, Configuring the Angular Project to use Angular Material or Flex-Layout (If needed), Updating AppModule, Generating a new component, Implementing service and inject it into the application, Using Angular HTTP client to obtain data from a server, and additional Information & useful Links.

What Is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS (Wikipedia)

Angular Architecture

Modular
Component-based with Templates
Services

Development

Installing angular-CLI

The command-line tool for Angular applications makes it easy to create an application. To install angular-CLI globally.

npm install -g @angular/cli or
npm install -g @angular/cli@VERSION

Use Sudo on a Mac and Linux

Generating and Serving an Angular Project using Angular-CLI

Create a folder named yourApplicationName and move into the folder to create a new Angular application.

ng new yourApplicationName
for instance, ng new myangularApp

Move into the yourApplication folder to compile the project.

ng serve — open

And then open a tab in the default browser at the address http://localhost:4200.

Configure the Angular Project to use Angular Material

Install Angular Material, Angular Animations, and HammerJS (If needed)

npm install — save @angular/material
npm install — save@angular/cdk
npm install — save @angular/animations
npm install — save hammerjs

To add any specific version to Angular user the command below

for instance, npm install — save angular-material@11.0.3

Configure the Angular Project to use Flex Layout

Install Angular Flex-Layout

npm install — save @angular/flex-layout@Version

Updating AppModule

Import the Angular Animations Module, Angular Material Toolbar Module, Flex Layout Module, and hammerjs into the root module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';@NgModule({
  
  . . . 
imports: [ 
    
    . . .,
    
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule
    
  ],

Generate a new component

Use the CLI’s ng generate command named yourComponentName

ng generate component yourComponentName

Import this component into the root module app.module.ts.

Implement a service and inject it into the application

Create a folder named services
Adding a Service named yourServiceName to the application using Angular CLI

ng generate service services/yourServiceName

Import and add the service to the root module “app.module.ts file”
Add it in the providers

Use Angular HTTP client to obtain data from a server

Configuring the Base Server URL
import the HttpClientModule in the root module app.module.ts

import { HttpClientModule } from '@angular/common/http';@NgModule({
  
  . . . 
  imports: [ 
    . . .     HttpClientModule 
  ],

Custom Attribute Directives

Create a new folder named directives within the app folder of the project

Using Angular-CLI add a new directive named ****

ng g directive directives/ ****

Build your Angular application to create a distribution folder

Using the Angular CLI

ng build — prod

The CLI should build a distribution folder named dist/**** containing all the application files.
Copy the contents of the dist/**** folder to the public folder of the server.

If there is setting up a server on the cloud or anywhere, the exact procedure depends on the cloud service provider. Should follow their documentation to see the procedure. In general, copy the contents of the distribution folder to the server-side to deploy the Angular application.

Additional Resources

Angular

Typescript

Typescript

An overview of Angular; Additional useful links

What Is Angular?

Angular Architecture

Development

Written by Paria Heidari

No responses yet