SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
Presented By:
Niraj Sharma & Piyush Agrawal
Start With Angular
( A JavaScript FrameWork )
Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session
timings, you are requested not
to join sessions after a 5
minutes threshold post the
session start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to move
out of session in case you need
to attend an urgent call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.
Agenda
Overview(client/server side scripting)
01
02
03
04
05
06
Why use Angular ?
Who uses Angular ?
Angular history
System Prerequisites
What is Angular ?
07 Angular CLI
08 IDE(s) for Angular development
09 Demo(sample App)
Overview
1. Server side scripting :
Web servers are used to execute server side scripting. They are basically used to create dynamic pages.It can
also access the file system residing at web server.
Server-side environment that runs on a scripting language is a web-server.
EX: JAVA, PHP, C#.net, C++ , Java , Python , Ruby , Scala etc
2. Client side scripting :
Web browsers execute client side scripting. It is use when browsers has all code. Source code used to transfer
from web server to user’s computer over internet and run directly on browsers. It is also used for validations
and functionality for user events.
EX: JavaScript, VBScript .
JS based libraries & frameworks
JavaScript Libraries
● jQuery
● Underscore and Lodash
● D3.js
● Reactjs
● Glimmer.js
JavaScript FrameWorks
● Angular
● Vue.JS
● Ember
● Meteor
● React Native
What is Angular ?
Angular is a development platform, built on TypeScript. As a platform it has following features:
● A Module-based framework.
● A collection of well-integrated libraries.
● Follow TDD approach.
● A suite of developer tools.
● Developed and maintained by Google.
● Used to build powerful Single Page Applications(SPA).
Why use Angular ?
Who uses Angular?
Microsoft Office Deutsche Bank Mixer
Gmail Overleaf Paypal
System Prerequisites
1. Node Js
for installing nodeJs in your Ubuntu System
● sudo apt update
● sudo apt install nodejs npm
for verify that nodejs installed run
● node -v
1. Angular CLI ( Command Line interface)
Install the CLI using the npm package manager:
● npm install -g @angular/cli
for verify that angular CLI installed run
● ng --version
Angular CLI
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and
maintain Angular applications directly from a command shell.
Angular give us an lots of angular cli commands that reduce our workload and increase
productivity
● ng new <name> [options]
● ng generate component <name> [options]
● ng generate service <name> [options]
● ng generate directive <name> [options]
IDE(s) for
Angular App Development
Webstorm
Visual Studio
Sublime Text
Atom
eclipse
Demo
Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA

Contenu connexe

Tendances

Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
DataArt
 

Tendances (20)

Tales of an open source library
Tales of an open source libraryTales of an open source library
Tales of an open source library
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDBTDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
 
Branching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by AbstractionBranching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by Abstraction
 
Jenkins Pipelining and Gatling Integration
Jenkins Pipelining and  Gatling IntegrationJenkins Pipelining and  Gatling Integration
Jenkins Pipelining and Gatling Integration
 
A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
Станислав Сидоренко «DeviceHive Java Server – миграция на Spring Boot»
 
Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET Developers
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
 
Cross Community CI project
Cross Community CI projectCross Community CI project
Cross Community CI project
 
Node js Chapter-2
Node js Chapter-2Node js Chapter-2
Node js Chapter-2
 
Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block Microsoft ASP.NET 5 - The new kid on the block
Microsoft ASP.NET 5 - The new kid on the block
 
“ASP.NET Core. Features and architecture”
“ASP.NET Core. Features and architecture” “ASP.NET Core. Features and architecture”
“ASP.NET Core. Features and architecture”
 
Swagger code motion talk
Swagger code motion talkSwagger code motion talk
Swagger code motion talk
 
Introduction to MDC Logging in Scala.pdf
Introduction to MDC Logging in Scala.pdfIntroduction to MDC Logging in Scala.pdf
Introduction to MDC Logging in Scala.pdf
 
ElasticMQ : Server for Local SQS
ElasticMQ : Server for Local SQSElasticMQ : Server for Local SQS
ElasticMQ : Server for Local SQS
 
Services in kubernetes-KnolX .pdf
Services in kubernetes-KnolX .pdfServices in kubernetes-KnolX .pdf
Services in kubernetes-KnolX .pdf
 
WJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in EclipseWJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in Eclipse
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Ansible Best Practices - July 30
Ansible Best Practices - July 30Ansible Best Practices - July 30
Ansible Best Practices - July 30
 

Similaire à Start with Angular framework

Similaire à Start with Angular framework (20)

Ionic & Angular
Ionic & AngularIonic & Angular
Ionic & Angular
 
Angular Js
Angular JsAngular Js
Angular Js
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlier
 
Why choose Angular 6?
Why choose Angular 6?Why choose Angular 6?
Why choose Angular 6?
 
Serverless java
Serverless   javaServerless   java
Serverless java
 
Introduction to selenium
Introduction to seleniumIntroduction to selenium
Introduction to selenium
 
Getting started with react basics
Getting started with react basicsGetting started with react basics
Getting started with react basics
 
Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
 
КОСТЯНТИН НАТАЛУХА «Setup and run automated test framework for Android applic...
КОСТЯНТИН НАТАЛУХА «Setup and run automated test framework for Android applic...КОСТЯНТИН НАТАЛУХА «Setup and run automated test framework for Android applic...
КОСТЯНТИН НАТАЛУХА «Setup and run automated test framework for Android applic...
 
Top 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersTop 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For Developers
 
Top 20 AngularJS Development Tools That Developers Should Know In 2022
Top 20 AngularJS Development Tools That Developers Should Know In 2022Top 20 AngularJS Development Tools That Developers Should Know In 2022
Top 20 AngularJS Development Tools That Developers Should Know In 2022
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
 
Reason to choose Angular JS for your Web Application
Reason to choose Angular JS for your Web ApplicationReason to choose Angular JS for your Web Application
Reason to choose Angular JS for your Web Application
 
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web Applications
 
Introduction to selenium
Introduction to seleniumIntroduction to selenium
Introduction to selenium
 
Why Should we use Microsoft's Playwright
Why Should we use Microsoft's PlaywrightWhy Should we use Microsoft's Playwright
Why Should we use Microsoft's Playwright
 
Angular Multi-env Setup
Angular Multi-env SetupAngular Multi-env Setup
Angular Multi-env Setup
 
AngularJS Training in Noida
AngularJS Training in NoidaAngularJS Training in Noida
AngularJS Training in Noida
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
 

Plus de Knoldus Inc.

Plus de Knoldus Inc. (20)

Supply chain security with Kubeclarity.pptx
Supply chain security with Kubeclarity.pptxSupply chain security with Kubeclarity.pptx
Supply chain security with Kubeclarity.pptx
 
Mastering Web Scraping with JSoup Unlocking the Secrets of HTML Parsing
Mastering Web Scraping with JSoup Unlocking the Secrets of HTML ParsingMastering Web Scraping with JSoup Unlocking the Secrets of HTML Parsing
Mastering Web Scraping with JSoup Unlocking the Secrets of HTML Parsing
 
Akka gRPC Essentials A Hands-On Introduction
Akka gRPC Essentials A Hands-On IntroductionAkka gRPC Essentials A Hands-On Introduction
Akka gRPC Essentials A Hands-On Introduction
 
Entity Core with Core Microservices.pptx
Entity Core with Core Microservices.pptxEntity Core with Core Microservices.pptx
Entity Core with Core Microservices.pptx
 
Introduction to Redis and its features.pptx
Introduction to Redis and its features.pptxIntroduction to Redis and its features.pptx
Introduction to Redis and its features.pptx
 
GraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdfGraphQL with .NET Core Microservices.pdf
GraphQL with .NET Core Microservices.pdf
 
NuGet Packages Presentation (DoT NeT).pptx
NuGet Packages Presentation (DoT NeT).pptxNuGet Packages Presentation (DoT NeT).pptx
NuGet Packages Presentation (DoT NeT).pptx
 
Data Quality in Test Automation Navigating the Path to Reliable Testing
Data Quality in Test Automation Navigating the Path to Reliable TestingData Quality in Test Automation Navigating the Path to Reliable Testing
Data Quality in Test Automation Navigating the Path to Reliable Testing
 
K8sGPTThe AI​ way to diagnose Kubernetes
K8sGPTThe AI​ way to diagnose KubernetesK8sGPTThe AI​ way to diagnose Kubernetes
K8sGPTThe AI​ way to diagnose Kubernetes
 
Introduction to Circle Ci Presentation.pptx
Introduction to Circle Ci Presentation.pptxIntroduction to Circle Ci Presentation.pptx
Introduction to Circle Ci Presentation.pptx
 
Robusta -Tool Presentation (DevOps).pptx
Robusta -Tool Presentation (DevOps).pptxRobusta -Tool Presentation (DevOps).pptx
Robusta -Tool Presentation (DevOps).pptx
 
Optimizing Kubernetes using GOLDILOCKS.pptx
Optimizing Kubernetes using GOLDILOCKS.pptxOptimizing Kubernetes using GOLDILOCKS.pptx
Optimizing Kubernetes using GOLDILOCKS.pptx
 
Azure Function App Exception Handling.pptx
Azure Function App Exception Handling.pptxAzure Function App Exception Handling.pptx
Azure Function App Exception Handling.pptx
 
CQRS Design Pattern Presentation (Java).pptx
CQRS Design Pattern Presentation (Java).pptxCQRS Design Pattern Presentation (Java).pptx
CQRS Design Pattern Presentation (Java).pptx
 
ETL Observability: Azure to Snowflake Presentation
ETL Observability: Azure to Snowflake PresentationETL Observability: Azure to Snowflake Presentation
ETL Observability: Azure to Snowflake Presentation
 
Scripting with K6 - Beyond the Basics Presentation
Scripting with K6 - Beyond the Basics PresentationScripting with K6 - Beyond the Basics Presentation
Scripting with K6 - Beyond the Basics Presentation
 
Getting started with dotnet core Web APIs
Getting started with dotnet core Web APIsGetting started with dotnet core Web APIs
Getting started with dotnet core Web APIs
 
Introduction To Rust part II Presentation
Introduction To Rust part II PresentationIntroduction To Rust part II Presentation
Introduction To Rust part II Presentation
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Configuring Workflows & Validators in JIRA
Configuring Workflows & Validators in JIRAConfiguring Workflows & Validators in JIRA
Configuring Workflows & Validators in JIRA
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Dernier (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Start with Angular framework

  • 1. Presented By: Niraj Sharma & Piyush Agrawal Start With Angular ( A JavaScript FrameWork )
  • 2. Lack of etiquette and manners is a huge turn off. KnolX Etiquettes Punctuality Respect Knolx session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
  • 3. Agenda Overview(client/server side scripting) 01 02 03 04 05 06 Why use Angular ? Who uses Angular ? Angular history System Prerequisites What is Angular ? 07 Angular CLI 08 IDE(s) for Angular development 09 Demo(sample App)
  • 4. Overview 1. Server side scripting : Web servers are used to execute server side scripting. They are basically used to create dynamic pages.It can also access the file system residing at web server. Server-side environment that runs on a scripting language is a web-server. EX: JAVA, PHP, C#.net, C++ , Java , Python , Ruby , Scala etc 2. Client side scripting : Web browsers execute client side scripting. It is use when browsers has all code. Source code used to transfer from web server to user’s computer over internet and run directly on browsers. It is also used for validations and functionality for user events. EX: JavaScript, VBScript .
  • 5. JS based libraries & frameworks JavaScript Libraries ● jQuery ● Underscore and Lodash ● D3.js ● Reactjs ● Glimmer.js JavaScript FrameWorks ● Angular ● Vue.JS ● Ember ● Meteor ● React Native
  • 6. What is Angular ? Angular is a development platform, built on TypeScript. As a platform it has following features: ● A Module-based framework. ● A collection of well-integrated libraries. ● Follow TDD approach. ● A suite of developer tools. ● Developed and maintained by Google. ● Used to build powerful Single Page Applications(SPA).
  • 8. Who uses Angular? Microsoft Office Deutsche Bank Mixer Gmail Overleaf Paypal
  • 9.
  • 10. System Prerequisites 1. Node Js for installing nodeJs in your Ubuntu System ● sudo apt update ● sudo apt install nodejs npm for verify that nodejs installed run ● node -v 1. Angular CLI ( Command Line interface) Install the CLI using the npm package manager: ● npm install -g @angular/cli for verify that angular CLI installed run ● ng --version
  • 11. Angular CLI The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. Angular give us an lots of angular cli commands that reduce our workload and increase productivity ● ng new <name> [options] ● ng generate component <name> [options] ● ng generate service <name> [options] ● ng generate directive <name> [options]
  • 12. IDE(s) for Angular App Development Webstorm Visual Studio Sublime Text Atom eclipse
  • 13. Demo
  • 14. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA