Scribd
Upload
38 views

Introduction To AngularJS With Logo

Uploaded by

Kanika Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Introduction To AngularJS With Logo

Uploaded by

Kanika Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Introduction to Angular JS

Agenda

1 Prerequisites 7 Environmental setup

2 What are SPAs? 8 AngularJS IDE’s

3 Introduction to AngularJS? 9 Introduction to Visual studio code

4 Features of AngularJS 10 Angular App Fundamentals

5 MVC Architecture 11 Companies using AngularJS

6 Versions and Transitions 12 Advantages of AngularJS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Prerequisites

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML

Adds Design/Structure to the


webpage

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Skeleton
<!DOCTYPE html>

<html>

<head>
<title></title>
</head>

<body>

</body>

</html>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS

Adds Style/Colors to the webpage

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Syntax
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
selector1{
property1:value;
property2:value;
}
selector2{
property1:value;
}
</style>
</head>
<body>
</body>
</html>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Adds Behaviour/Interactivity to the
webpage

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
JS Syntax
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
…..
…..
<script>
document.write(“Hello World”);
console.log(“Great Learning”);
</script>

</body>
</html>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What are SPA’s?

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What are SPAs?
 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.
Request for an item in search box
Request for Data
Request for Page X
Request for www.amazon.com Request for www.gmail.com

Client Server Client Server


Homepage for www.amazon.com in response Entire app package for www.gmail.com in response
Response for Page X Data in Response
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Introduction to
AngularJS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Why AngularJS?
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?

• Framework is the basic structure


• It helps in easy development
• It provides basic configuration

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What is AngularJS?

Angular JS is an open source It is designed for web,


JavaScript Framework desktop and mobile
platforms

It is completely written in
Maintained by Google
Typescript

It uses HTML’s syntax to Primarily aimed to develop


express your applications Single Page Applications
component clearly

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Features of AngularJS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Speed and
Data Binding Performance

Architecture Dependency Injection

Directives Deep Linking

Not browser specific Routing

Code Less Productivity

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
MVC Architecture

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Ingredients:
Milk
Tea Leaves
Water
Sugar
Cardamom

Chef Customer

Waiter

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
DATA

Model View

Controller

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Versions and Transition

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Angular JS/Angular 1.X Angular 4 – Reduce the Angular 7 – Prompts Angular 9 – This came
– aimed to simplify both size of the code for the were introduced which with new and improved
the development and components with faster provide tips in CLI. It Ivy compiler and
the testing phase of compilation, better bug help discover inbuilt runtime, faster testing,
applications. fixes alert. SCSS support, routing. better debugging.

Angular 2 – Mobile Angular 8 – Ivy


Angular 5,6 – Angular
oriented, It provided Compiler introduced,
CLI got updated, New
more choices for Differential loading of
commands added like
languages from ES5, modern JS, Dynamic
ng-update and ng-add.
ES6, TS. imports for lazy routes

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Environmental setup

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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 ?

TypeScript Transpiler JavaScript

Node js

2) Install angular-cli - https://cli.angular.io/

Run command npm install -g @angular/cli


Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
AngularJS IDEs

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
AngularJS IDEs

● Web storm

● Atom

● Sublime

● Best editor: Visual Studio

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Web storm

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Atom

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Sublime Text

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Visual studio code

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Introduction to
Visual studio code

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Angular App Fundamentals

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
How Angular App Starts?
Main.ts file is entry point of our application.
main.ts Main.ts file bootstrap app.module.ts file

This file bootstrap our first component i.e


app.module.ts app.component.ts

This file render app.component.html file.


app.component.ts

Final HTML template


app.component.html

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Bootstraping the AppModule

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Bootstraping the AppComponent

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Simple AngularJS App

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Companies using AngularJS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Flipkart YouTube

Gmail Nike

UpWork SONY

PayPal HBO

Samsung Microsoft Office

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Advantages of AngularJS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Advantages of AngularJS

• 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.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Thank You

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited

You might also like