Download to read offline
![Component Blueprint AngularJS Meetup 2016 Module Template HTML + CSS (view) Component Class JavaScript (Controller/ViewModel) Event Binding ( ) Property Binding [ ] Component Service Classes JavaScript (Model) Zone](https://image.slidesharecdn.com/0f03926a-6358-406b-a170-f25f93f1760d-161015032406/75/ComponentOrientedArchitectureWithAngular2-WithFonts-6-2048.jpg)
![Data Binding AngularJS Meetup 2016 Template <html> <title>HTML</title> <body> This is HTML! </body> </html> <HTML> Component Interpolation {{ }} Property Binding [ ] Event Binding ( ) Two way Binding [( )]](https://image.slidesharecdn.com/0f03926a-6358-406b-a170-f25f93f1760d-161015032406/75/ComponentOrientedArchitectureWithAngular2-WithFonts-7-2048.jpg)
ComponentOrientedArchitectureWithAngular2 -WithFonts
- 1. Organized by TechnologyPartner
- 2. Component Oriented Architecture with Angular 2 B YS H I V A N K A D E S I L V A
- 3. AngularJS Meetup 2016 Scope - ComponentOriented Architecture - Introduction to Angular 2 components - Interaction of Angular 2 components - Componentization We are not designing pages, we are design systems of components. S T E P H E N H E Y
- 4. AngularJS Meetup 2016 Component OrientedArchitecture • Building the application in small reusable software components • Not a new concept • Components are the basic building blocks of Angular 2 app
- 5. AngularJS Meetup 2016 Angular 2Components • Angular 2 component consists of • HTML • CSS • JavaScript • Two types of components • Presentational/Dumb components • Container/Smart components
- 6. Component Blueprint AngularJS Meetup 2016 Module Template HTML+ CSS (view) Component Class JavaScript (Controller/ViewModel) Event Binding ( ) Property Binding [ ] Component Service Classes JavaScript (Model) Zone
- 7. Data Binding AngularJS Meetup 2016 Template <html> <title>HTML</title> <body> Thisis HTML! </body> </html> <HTML> Component Interpolation {{ }} Property Binding [ ] Event Binding ( ) Two way Binding [( )]
- 8. Component Blueprint AngularJS Meetup 2016 ContainerComponent Container/Component Component Component Container/Component Component Component
- 9. Event Binding AngularJS Meetup 2016 ComponentInteraction Property Binding RC CC CC CC CC CC CC Module Service
- 10. Componentization AngularJS Meetup 2016 Navbar Product Price Search Search Price ProductTitle Title Online Auction About Services Contact FooterCopyright © Online Auction 2016 Carousel Product Name 24.99 Lorem Ipsum is simply dummy text of the printing and typesetting industry Product Product Name 24.99 Lorem Ipsum is simply dummy text of the printing and typesetting industry Product
- 11.