Skip to main content

Related Articles

Loading...

Introduction to Angular

Introduction to Angular



Google release AngularJS in year 2010. It got popular immediately because it made static HTML interactive. However, with other latest web development technologies developers started to see drawbacks of AngularJS.

Google then start to rewrite framework again and decided to shift from Java Script to Type Script. Type Script is helpful to avoid drawback of AngularJS

Angular 2 was then introduced in 2016 and it evolves up to Angular 9.


How to install Angular


To setting up the angular framework you need 

1. Node

To install node go to official site of node to download the version you need (nodejs)

Run the downloaded Node.js .msi Installer 

If you want to know the node version installed in your computer run following command

 node -v


node -v

2. npm package manager


Angular application is depending in npm package to support many features and functionalities. To use npm packages you need npm package manager in your computer.

When you install node by default npm client also will get installed.

To identified npm install in your machine you can run following command

npm -v


npm -v

3. Angular CLI 

Angular command line interface will need to create angular applications. To generate Components, Directives, Services. 

Angular CLI also helpful to do different task like testing bundling and deploying the app. 

To install Angular CLI you can run below command 

npm install -g @angular/cli 

To identify the CLI version installed in your machine you can run below command 

ng --version


ng --version


Once you run -g it will installed cli in globaly. In windows
C:\Users\User\AppData\Roaming\npm\node_modules will be the location.

if you run npm root -g in your command prompt it will shows the correct location.



npm node modules


Good Luck. Now you have setup the environment to start your first angular Application.

Search: install angular 8,npm install -g @angular/cli,uninstall angular cli,install angular 7,install specific version of angular-cli,install angular 9,angular tutorial,angular cli version




Labels:

Comments

Post a Comment

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on
Post a Comment
Read more

Angular PrimeNG checkboxes styling and events handling

  Getting Started With PrimeNG Styling in Angular App This chapter I am planning to show how you can handle events of the checkboxes. For that I will use checkbox for every card to place the order.  To use PrimeNG checkboxes you have to import checkbox module in app.module.ts file. import {CheckboxModule} from 'primeng/checkbox'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; import {CheckboxModule} from 'primeng/checkbox'; @NgModule({ declarations: [ AppComponent, LandingComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, CardModu
Post a Comment
Read more

Angular NgFor directive and trackby

Today we will learn about NgFor one of the core directive of angular. NgFor helps to build list and tables in Angular   Let us see the example in our flower store app. In the landing page I am going to print list of flowers that are available in the store. Later we will add images and show them in a carousel to rotate automatically. First we will create the domain class called flower.ts and you can copy paste below code.  export class flower{ constructor() { } name:string=''; price:number = 0; availableQuantity:number = 0 } To use this domain class inside another component you must specify export keyword along with the class keyword. Flower domain has 3 attributes to store name of the flower then price and the available quantity. Now we can create the array from the flower type as below inside the landing.component.ts file. myFlowerList:flower[]=[]; I will call a method inside ngOnInit to add values to the array as below. ngOnInit is one of t
Post a Comment
Read more