Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,232 views

Published on

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

Published in: Technology
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×