Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Webpage
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Agenda
❖ Webpage and DOM
❖ DOM Manipulation
❖ JavaScript...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Webpage and DOM
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Webpage and DOM
DOM Tree of the HTML document
html
head
...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
DOM Manipulation
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
DOM Manipulation
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
JavaScript
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
JavaScript & jQuery
➢ JavaScript is a programming langua...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Why Angular?
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Why Angular?
2 Way Data Binding
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
What is a
Single Page Application?
EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js
A Single Page Application is a web application that req...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Traditional Way Vs Single Page Application
Traditional W...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Introduction
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Introduction
OpenSource Client Side
JavaScript f...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Features
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Features
S P E E D A N D
P E R F O R M A N C E
E...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Installation
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module Component Metadata Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module is a class with
@NgMod...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Importing Modules
Decorator
D...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Importing Component Decorator...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Metadata describes how
to pro...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Decorator that specifies how
...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Used to define view of a
comp...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Data binding plays an importa...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Data binding is also importan...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
{ }
Data Access
Logging
Busin...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Creates a new instance of
cla...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Changes the appearance or beh...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Tem...
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Architecture
www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Angular Architecture
Template
< >
Directives
{ }
Compone...
EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js
Thank You …
Questions/Queries/Feedback
Prochain SlideShare
Chargement dans…5
×

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka

This Edureka "Angular 4 Tutorial" will help you to learn about different Angular components and their features. Angular is a framework to develop highly scalable, fast, and testable web client-side applications. Below are the topics covered in this tutorial:

1) Webpage Development
2) DOM Manipulation
3) Traditional WebApp Vs SPA
4) Angular Introduction
5) Angular Features
6) Angular Installation
7) Building Blocks of Angular
8) Angular Architecture

Here is a structured training on Angular, check out the details: https://goo.gl/5rQOdw

Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/kgMONz

  • Identifiez-vous pour voir les commentaires

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka

  1. 1. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Webpage
  2. 2. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Agenda ❖ Webpage and DOM ❖ DOM Manipulation ❖ JavaScript and jQuery ❖ Why Angular? ❖ What is SPA? ❖ Angular Introduction ❖ Angular Features ❖ Angular Installation ❖ Basic Building Blocks of Angular ❖ Angular Architecture
  3. 3. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Webpage and DOM
  4. 4. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Webpage and DOM DOM Tree of the HTML document html head title HTML Markup <html> <head> <title> Angular 2 Tutorial </title> </head> <body> <h1> Welcome to Angular 2 Tutorial </h1> <p>Angular is a development platform for creating a applications using modern web standards.</p> </body> </html> body h1 p
  5. 5. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING DOM Manipulation
  6. 6. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING DOM Manipulation
  7. 7. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING JavaScript
  8. 8. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING JavaScript & jQuery ➢ JavaScript is a programming language designed for use in a web browser. ➢ Used for manipulating DOM ➢ Example: Document.body.style.background = red; ➢ jQuery is a library built in JavaScript to automate and simplify common tasks. ➢ Used for manipulating DOM ➢ Example: $ (‘body’) .css (‘background’, ‘#ccc’);
  9. 9. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Why Angular?
  10. 10. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Why Angular? 2 Way Data Binding
  11. 11. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING What is a Single Page Application?
  12. 12. EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js A Single Page Application is a web application that requires only a single page load in a web browser. ➢ Whole page is not reloaded every time ➢ Your browser fully renders the DOM once ➢ Later any server interactions is performed by JavaScript which modifies the view mail inbox mail categories What is SPA? 4
  13. 13. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Traditional Way Vs Single Page Application Traditional Way Life Cycle Single Page Application Life Cycle Client Server Initial request form POST initial request AJAX { … } JSON Client Server
  14. 14. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Introduction
  15. 15. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Introduction OpenSource Client Side JavaScript framework created by Google Angular Framework by Google Useful for building complex applications in the browser (and beyond). Angular accomplishes a lot by embracing HTML, JavaScript & CSS Introduction of Object Oriented Web Development using TypeSCript
  16. 16. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Features
  17. 17. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Features S P E E D A N D P E R F O R M A N C E E S 6 A N D T Y P E S C R I P T S U P P O RT M O D U L A R S U P P O RT S M O B I L E , TA B L E T S , E TC . 01 02 03 04
  18. 18. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Installation
  19. 19. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives
  20. 20. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module is a class with @NgModule metadata Encapsulation of different similar functionalities Every Angular app has at least one root module Directives Pipes Components Single Module export Similar Functionalities Module Component Metadata Template Data Binding Services Directives
  21. 21. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Importing Modules Decorator Declaring all the components Provide Services to all module’s component Module Component Metadata Template Data Binding Services Directives
  22. 22. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives Nav Bar News Feed
  23. 23. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives Sports Component
  24. 24. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Importing Component Decorator Decorator Meta Data Exporting Component Class Module Component Metadata Template Data Binding Services Directives
  25. 25. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Metadata describes how to process the class Decorator is used to attach metadata @Component({ …… }) Component { } MyClass Decorator @NgModule({ …… }) Module { } AppClass Decorator Example: Module Component Metadata Template Data Binding Services Directives
  26. 26. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Decorator that specifies how to process an Angular Class Creates an instance of the component HTML template for the component CSS Styling Provides Service for the Component Module Component Metadata Template Data Binding Services Directives
  27. 27. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Used to define view of a component Describes how the component is rendered on the page. Looks like HTML, except for a few differences. Root Component { } Root Template < > Child A Component { } Child A Template < > Child B Component { } Child B Template < > Child A Component { } Child A Template < > Module Component Metadata Template Data Binding Services Directives
  28. 28. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives COMPONENTDOM [property] = “value” 01 02 03 04 I N T E R P O L AT I O N P R O P E R T Y B I N D I N G E V E N T B I N D I N G 2 WAY D ATA B I N D I N G COMPONENTDOM (event) = “event handler” COMPONENTDOM [( ngModel )] COMPONENTDOM {{ value }} T Y P E S O F D A T A B I N D I N G Data binding plays an important role in communication between a template and its component
  29. 29. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Data binding plays an important role in communication between a template and its component. Module Component Metadata Template Data Binding Services Directives
  30. 30. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Data binding is also important for communication between parent and child components. Parent Component { } Event Binding Property BindingModule Component Metadata Template Data Binding Services Directives
  31. 31. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular { } Data Access Logging Business Logic Configuration Components SERVICES Service is a broad category encompassing any value, function, or feature that your application needs. logging service data service message bus tax calculator Example: { }Directives Services Module Component Metadata Template Data Binding Services Directives
  32. 32. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives Service Class Service Method for retrieving data
  33. 33. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Creates a new instance of class along with its required dependencies Used to provide services to a component Service 2 { } Service 2 { } Component Service 1 { } Service 3 { } Module Component Metadata Template Data Binding Services Directives Dependency Injection
  34. 34. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives Injecting Service into the Component Retrieving data Importing Service Class
  35. 35. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Changes the appearance or behavior of a DOM elementModule Component Metadata Template Data Binding Services Directives AT T R I B U T E D I R E C T I V E S T R U C T U R A L D I R E C T I V E C O M P O N E N T S1 2 3 Directives with a template Adds & removes DOM elements to change DOM layout Changes the appearance or behavior of an element
  36. 36. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives S T R U C T U R A L D I R E C T I V E2 Adds & removes DOM elements to change DOM layout Iterating over the movies list
  37. 37. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives AT T R I B U T E D I R E C T I V E3 Changes the appearance or behavior of an element Importing Directive, ElementRef & HostListener Directive Metadata Injecting ElementRef to access the DOM elements Bold the text on cursor hover Un-bold the text
  38. 38. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Architecture
  39. 39. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Architecture Template < > Directives { } Components Module Components { } Module Service { } Module Fn ƛ Module Value 3.14 Metadata Property Binding Event Binding Injectors Services Metadata
  40. 40. EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback

×