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

1. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Webpage

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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Webpage and DOM

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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING DOM Manipulation

6. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING DOM Manipulation

7. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING JavaScript

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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Why Angular?

10. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Why Angular? 2 Way Data Binding

11. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING What is a Single Page Application?

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. 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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Introduction

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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Features

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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Installation

19. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives

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. 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. 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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Building Blocks of Angular Module Component Metadata Template Data Binding Services Directives Sports Component

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING Angular Architecture

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. EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback