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 For Beginners | Angular 4 Introduction | Angular 4 Training | Edureka

This is the first tutorial in this Angular for beginners series by Edureka. It will introduce you to angular and it's features along with the entire road map of this free Angular 4 Tutorial course.

Angular 4 Tutorial For Beginners | Angular 4 Introduction | Angular 4 Training | Edureka

  1. 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Free Angular Course For Beginner
  2. 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Free Angular Course For Beginner
  3. 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Tutorial - Road Map Angular Introduction Angular Install & Project Structure Angular Components Angular Data Binding Angular Directives Angular & angularFirebase Angular CRUD App Angular Services Angular Forms Angular Routing 1 10 9 8 7 6 1 2 3 4 5 678910
  4. 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka’s Angular Certification Training
  5. 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Angular Certification Training Introduction to JavaScript MVC Framework & Angular Components and DOM Interactions Components and Dependency Injection Routes, Inbuilt Directives and Pipes Custom Directives and Pipes Third-party Library Integration, Other APIs Unit Testing and Angular-CLI 1 2 3 4 5 6 7 www.edureka.co/angular-training
  6. 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is Angular?
  7. 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is Angular? Angular is a JavaScript framework that allows you to create modern Single Page Application.
  8. 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Traditional vs Single Page Application
  9. 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Traditional Web Application Traditional Web App Life Cycle Client Server Initial request Click Button ❖ With a traditional website, content is organized on individual pages that are usually static. ❖ Don't change in response to a visitor's actions. ❖ A brand new page with its own static content is served when a visitor clicks a button.
  10. 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Single Page Application Single Page Web App Life Cycle Client Server Initial request Click button ❖ Instead of serving a brand new page to visitors, SPA swaps out the old content for new in case of any user interaction ❖ SPA is faster, more responsive, and more compact. ❖ The SPA and all its content is only loaded once, when the visitor first views the site. { … } JSON
  11. 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Are Angular 2, Angular 4 & AngularJS same?
  12. 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Are Angular 2, Angular 4 & AngularJS same? Angular 2/4/5AngularJS Angular ➢ Released by Google in the year 2010 ➢ JavaScript based framework for creating SPA ➢ Officially supported but no longer will be developed ➢ Released in Sept’ 2016 ➢ Complete re-write of AngularJS ➢ Started from Version 2 ➢ Major version will be released every six months because of Semantic Versioning
  13. 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Features
  14. 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Features M O D U L A R I T Y ❖ Module encapsulate similar cohesive block of functionality together ❖ Adding new features without changing the overall code base ❖ Easy to maintain and test ❖ For example: admin module, home page module, etc. Home Page Admin Module Signup Page
  15. 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Features S P E E D & P E R F O R M A N C E ❖ Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines. ❖ Angular Component Router, which split the code allowing users to load only relevant code required for rendering the requested view/route.
  16. 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Features T Y P E S C R I P T & E S 6 ❖ TypeScript is a superset of JavaScript ❖ Static types make things like IDEs and builders/compilers more effective ❖ TypeScript is apt for developers who are coming from Java and C# ❖ ES6 modules help you to decouple your code easily
  17. 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Features N AT I V E A P P D E V E L O P M E N T ❖ Create native mobile web application using the same angular knowledge ❖ Build hybrid apps with the help of Iconic support and native app using NativeScript or React Native.
  18. 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Thank You

×