Skip to main content

Angular 7 Tutorial-1


Hello friends, This is my first tutorial on Angular 7.
Before going through this Angular 7 Tutorial blog, I would like to draw your attention a bit. You must have gone through many web & mobile applications which are responsive & dynamic. It does not reload the whole page and instead reloads only the required section. For example Gmail, you might have noticed that when you click on an email, it only reloads that e-mail in the body section and does not retrieve the rest of the page like side and navigation bar. These kind of applications are SPA (Single Page Application) and are developed using Angular. Some of the most popular examples are Netflix, PayPal etc. 
In this Angular 7 tutorial ,you will learn about What is Angular 7,its Features and its Installation Process. 

 What is angular 7 ?
Angular 7 is an open source JavaScript framework which makes you able to create reactive Single Page Applications (SPAs). Angular 7 is completely based on components. It consists of several components which forms a tree structure with parent and child components.
Angular's versions beyond 2+ are generally known as Angular only. The very first version Angular 1.0 is known as AngularJS.

 > What is Single Page Application (SPA)?
Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

 Angular 7 Installation
How to install Angular 7?
Installation Procedure:
1. Install Visual Studio Code IDE or any other IDE.
    You must have an IDE like Visual Studio Code IDE or any other IDE to run you angular 7 app.
    You can download VS Code from here:  https://code.visualstudio.com/

2. Install Node.js
You should install node.js to run your Angular 7 app. It manages npm dependencies support  some browsers when loading particular pages. It provides required  libraries to run Angular project. Node.js serves your run-time environment as your localhost.
go to node.js official website https://nodejs.org/en/ 
Download and install latest version of node.js .In my case, it is 10.15.3    
       After the successful installation, you will see command prompt like this:

3. Use npm to install Angular CLI

     Run the angular CLI command to install Angular CLI
     npm install -g @angular/cli
Or


Just go to Angular CLI official website https://cli.angular.io/
You will see the whole cli command to create an Angular app. You need to run the first command to install Angular CLI. These steps are same for Windows and Mac.

      npm install -g @angular/cli  
      ng new my-dream-app  
      cd my-dream-app  
      ng serve  
Your Angular 7 Environment setup is complete now.
I hope You like this tutorial.
On next tutorial we will discuss History and Version of Angular and create first angular 7 app.
Thanks For Reading.
Faisal Hussain

Comments

Post a Comment

Popular posts from this blog

Router transition animation in angular

Hello friends, This is my  tutorial on Angular. In this  tutorial ,you will learn about Angular router transition animation. Follow these steps to create animation in angular. First You need to enable the animations module by importing BrowserAnimationsModule . Write below code in your app.module.ts file import {  BrowserAnimationsModule  } from '@angular/platform-browser/animations'; Next you need to create animation.ts file and write below code . import {   animate,   query,   style,   transition,   trigger,   group, } from '@angular/animations'; export function routerAnimation() {   return trigger('routerAnimation', [     // One time initial load. Move page from left -100% to 0%     transition('-1 => *', [       query(':enter', [         style({           position: 'fixed',         ...
1 comment
Read more

Angular 7 Files Explanation

Hello friends, This is my third tutorial on Angular 7. In this Angular 7 tutorial ,you will learn about Angular 7 App Files Explanation. Angular 7 App Files Explanation See the structure of the Angular 7 app on  Visual Studio Code IDE  (how it looks on IDE). For Angular 7 development, you can use either Visual Studio Code IDE or WebStorm IDE. Both are good. Here, we are using  Visual Studio Code IDE .   Files used in Angular 7 app folder Angular 7 App files which are mainly used in your project are given below: src folder :   This is the folder which contains the main code files related to your angular application. app folder:  The app folder contains the files, you have created for app components. app.component.css:  This file contains the cascading style sheets code for your app component. app.component.html:  This file contains the html file related to app component. This is the template file which is used by angular to do...
Post a Comment
Read more