Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka
8 likes2,932 views
The document provides an overview of Angular for beginners, covering key concepts such as components, data binding, services, and routing. It highlights the role of the app component as the root component and explains the structure and bootstrapping of an Angular application. Additionally, it emphasizes Angular's versatility in hosting applications across various environments.
Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka
- 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Free Angular Course For Beginner
- 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Tutorial - Road Covered So Far 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
- 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. AppComponent: The Root Component
- 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. AppComponent: The Root Component
- 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Key Points: ❖ index.html is the file that is served by the server and gets rendered in the browser ❖ index.html links the styles and other javascript files which are required for running the app ❖ AppComponent is the root component which gets loaded first. ❖ Typically, all of the other custom components are nested inside AppComponent. ❖ AppComponent is inserted in the body of index.html using custom “app-root” element ❖ Selector tag is used to load a component’s instance.
- 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components?
- 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components? “A component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.”
- 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
- 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
- 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE-BAR COMPONENT < >
- 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE-BAR COMPONENT < > COURSES COMPONENT < >
- 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE BAR < > COURSES < > SEARCH BAR < > NAV-BAR < >
- 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE BAR COMPONENT < > COURSES COMPONENT < > SEARCH BAR COMPONENT < >HEADER COMPONENT < >
- 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Parent/Tree Structure App Component Sidebar Component Courses Component Header Component Search-bar Component Nav-bar Component
- 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
- 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components? Template or View Component < > “A component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.” Business Logic
- 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component
- 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component @Component({ …… }) Component { } MyClass Decorator A simple TypeScipt Class Metadata for the class I am Component
- 19. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component Component { } A simple TypeScipt Class Metadata for the class +
- 20. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Demo
- 21. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular App Bootstrapping
- 22. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular App Bootstraping main.ts AppModule AppComponent bootstraps bootstraps 1 2 ❖ Main TypeScripts file from where the execution begins ❖ Initializes the platform browser where the app will run and bootstraps AppModule ❖ Root Module of the angular app ❖ Bootstraps AppComponent and inserts it into the index.html host web page ❖ Root Component under which other components are nested ❖ First component to be inserted into the browser DOM
- 23. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why Angular Apps are Bootstrapped?
- 24. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why Angular Apps are Bootstrapped? ANGULAR is NOT a FRAMEWORK for creating WEB-ONLY APPLICATIONS ❖ Allows us to write angular app that can be hosted on other environments. ❖ Import the platform based on the environment. ❖ For example: @angular/platform-browser-dynamic is used for running the app on browsers