Angular: Basics

 

What is Angular?

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. A framework to build a client application in HTML and CSS and  Typescript.

It has changed the way we develop client-side applications, by providing the possibilities to apply the best practices usually applied on the server side like modular programming, separation of concerns, testability, and many others, on the client-side. 

Service-Oriented Front End Architecture - SOFEA

Angular uses the concept of Single Page Application (SPA)

• SPA is not an application of a unique HTML file but fully contained applications in the browser that do not need to make requests for new pages on the server. 

• Usually SPA makes request just of the data that will be shown inside of the pages ( accessing back end REST+JSON services)

Angular Requirements;

1. A code editor of your choice (i.e. vs code, atom, etc.)

2. Node.js + npm

3. Angular CLI

4. Bootstrap

Setting up Angular:

1. Installing the code editor:

                  In this case, we are using the VS code, If it's already installed on your computer then no worries, if not, download the software from here. Now go ahead and install vs code on your computer.

2. Installing Bootstrap:

  We can install this by clicking here

 

3. Installing Node.js:

Now go ahead download and install the node js from here.

4. Installing typescript and angular CLI using the npm of node.js:

When we install the node js, npm also comes with it. Using that we need to install the angular and typescript.

->npm install –g typescript 

->npm install –g @angular/cli

Note check whether the angular is installed or not in your computer use this command line 

-> ng -v

Create a new angular project:

1. Create a new project

->ng new my-app

2. Navigate to the workspace folder, such as my-app.

->cd my-app

3. To run the project after getting into the project directory

->ng serve --open

Congrats you just created your first angular application 

Components:

Angular is based on components. • There is already the main component called app.

the component that shows the “Wellcome to App” page when you access localhost:4200

 

Angular components have 3 basics parts. 

• name-component.html (the HTML code of component)

• name-component.css (css style of component) 

• name-component.ts (the typescritp of component)

Initially, you will have only one component only, to create additional components such as for header, body, footer separately 

Then we need to use this command line in CLI.(g = generate, c = component) 

• ng g c header 

• ng g c home 

• ng g c footer

Now you can use the components for the separate pages/ sections/ parts of your application and connect them to the app component 

Personal Suggestion: First create a complete project or project using Bootstrap and then we can easily convert that into the angular project 

All the CLI command required for the angular Click Here

Official website of angular Click here