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
