Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf

Agenda
Features of AngularJS Angular App Fundamentals
What are SPAs?
2
Introduction to AngularJS?
3
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
4 10
Versions and Transitions
6
Environmental setup
7
AngularJS IDE’s
8
Introduction to Visual studio code
9
MVC Architecture
5
Prerequisites
1
Companies using AngularJS
11
Advantages of AngularJS
12

Prerequisites

Adds Design/Structure to the
webpage
HTML

What is HTML?
● Stands for HyperText Markup Language
● HyperText: Link between web pages.
● Markup Language: Text between tags which defines structure.
● It is a language to create web pages
● HTML defines how the web page looks and how to display content with the help
of elements
● It forms or defines the structure of our Web Page
● Need to save your file with .html extension

HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Adds Style/Colors to the webpage
CSS

What is CSS?
● Stands for Cascading Style Sheet.
● It’s a stylesheet language used for styling the HTML pages.
● It describes how the page will appear on the screen.
● It can control the layout of multiple webpages at all once.
● It adds styles like fonts, colors, layout to the webpages.
● CSS benefits accessibility primarily by separating document structure from
presentation.
● CSS allows precise control over spacing, alignment and positioning.

CSS Syntax
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
selector1{
property1:value;
property2:value;
}
selector2{
property1:value;
}
</style>
</head>
<body>
</body>
</html>

Adds Behaviour/Interactivity to the
webpage

What is JS?
● Stands for JavaScript.
● It’s a scripting language used for adding behavior to the webpages.
● It is a verb of the webpage that defines all the actions to be performed on a webpage.
● Its an object oriented programming language that uses JIT compiler.
● It is everywhere and all web browsers are installed with it.
● JS application ranges from web development, mobile development etc.
● JS is easy, simple and very compatible with HTML-CSS

JS Syntax
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
…..
…..
<script>
document.write(“Hello World”);
console.log(“Great Learning”);
</script>
</body>
</html>

What are SPA’s?

What are SPAs?
Client Server Client Server
Request for www.amazon.com
Homepage for www.amazon.com in response
Request for Page X
Response for Page X
Request for an item in search box
Request page with that item results
 Multiple page request sent to Server every time we click
 Client page getting loaded again and again.
 Hence, such pages are low on speed
Request for www.gmail.com
Entire app package for www.gmail.com in response
Request for Data
Data in Response
 Single request sent to Server to load the whole
application
 Multiple data Requests going to the server, not page.
 Client page doesn’t get load again and again.

Introduction to
AngularJS

Why AngularJS?
• Framework is the basic structure
• It helps in easy development
• It provides basic configuration
Is JS ideal for SPAs? - “No, only JS is not ideal for SPAs. We have variety of Frameworks and Libraries
instead which will make it possible for JS to create SPAs”
What is a Framework?

What is AngularJS?
Angular JS is an open source
JavaScript Framework
Maintained by Google
It uses HTML’s syntax to
express your applications
component clearly
It is designed for web,
desktop and mobile
platforms
It is completely written in
Typescript
Primarily aimed to develop
Single Page Applications

Features of AngularJS

Data Binding
Architecture
Directives
Not browser specific
Code Less
Speed and
Performance
Dependency Injection
Deep Linking
Routing
Productivity

MVC Architecture

Customer
Waiter
Chef
Ingredients:
Milk
Tea Leaves
Water
Sugar
Cardamom

View
Controller
Model
DATA

Versions and Transition

Angular JS/Angular 1.X
– aimed to simplify both
the development and
the testing phase of
applications.
Angular 2 – Mobile
oriented, It provided
more choices for
languages from ES5,
ES6, TS.
Angular 4 – Reduce the
size of the code for the
components with faster
compilation, better bug
fixes alert.
Angular 5,6 – Angular
CLI got updated, New
commands added like
ng-update and ng-add.
Angular 7 – Prompts
were introduced which
provide tips in CLI. It
help discover inbuilt
SCSS support, routing.
Angular 8 – Ivy
Compiler introduced,
Differential loading of
modern JS, Dynamic
imports for lazy routes
Angular 9 – This came
with new and improved
Ivy compiler and
runtime, faster testing,
better debugging.

Environmental setup

Installing Angular
1) Install node.js and npm - https://nodejs.org/en/
Verify that you are running at least Node.js version 13.x or greater and npm version 5.x or greater
by running node -v and npm -v in a terminal/console window. Newer versions are fine.
Why node js ?
2) Install angular-cli - https://cli.angular.io/
Run command npm install -g @angular/cli
TypeScript Transpiler JavaScript
Node js

AngularJS IDEs

AngularJS IDEs
● Web storm
● Atom
● Sublime
● Best editor: Visual Studio

Web storm

Atom

Sublime Text

Visual studio code

Introduction to
Visual studio code

Angular App Fundamentals

Create Angular App
Once angular-cli is installed, create a new app
run command - ng new <name of the app>
Once the application is created, go to the application folder and run command - ng serve to serve the
application.
Serve/Run Angular App :-
The angular is by default served at http://localhost:4200
Open this link in your browser

Angular Project Structure
Root project folder, all components
reside here
Assets folder, all images, stylesheets,
JavaScript or third party libraries
reside in assets
main.ts, index.html - entry point of
application

How Angular App Starts?
main.ts
app.module.ts
app.component.ts
app.component.html
Main.ts file is entry point of our application.
Main.ts file bootstrap app.module.ts file
This file bootstrap our first component i.e
app.component.ts
This file render app.component.html file.
Final HTML template

Bootstraping the AppModule

Bootstraping the AppComponent

Simple AngularJS App

Companies using AngularJS

Flipkart
Gmail
UpWork
PayPal
Samsung
YouTube
Nike
SONY
HBO
Microsoft Office

• Number of errors or issues will be minimal as it’s an open source framework
• Two-way binding – we used to write extra JS code to keep the data in HTML code and data later in sync.
Now, Angular will do this automatically
• Routing – Moving from one view to another is pretty easy here as it will be a SPA.
• It supports both Unit testing and Integration testing.
• Directives – It provides its own libraries and directives which makes it more easy to use and code.

Thank You

Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf

More Related Content

Similar to Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf (20)

More from ahmadfaisal744721 (20)

Recently uploaded (20)

Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf