Download to read offline
Uploaded byLena Lekkou
The 4W's of Angular
Lena gave an overview of Angular and discussed when it is a good fit for different types of projects and developers. She explained that Angular is well-suited for complex web applications because it promotes maintainability and code consistency with large teams. Lena also provided tips for getting started with Angular, including learning HTML, CSS, JavaScript fundamentals first before diving into Angular and TypeScript.
The 4W's of Angular
- 1. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
- 2. Hi! I’m Lena! ▪I’m a Designer ▪ Head of Web @SAE Athens ▪ Co-Organizer of Angular Athens Meetup newly added : ) ▪ Organizer of Athens Gamification A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 3. Hi! I’m Lena! Istudy Angular in a more Theoretical Approach. “Should my students develop Web Apps in Angular? Is it important to add Angular in our Study Path?” A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 4. Hi! I’m Lena! Istudied Angular with a more Theoretical Approach. Should my students develop websites in Angular? Is it important to add Angular lessons in our Study Path? A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u The answer is YES! BUT… Don’t start with Angular. Start with Web Fundamentals and end with Angular in an Awesome Dramatic Way. : )
- 5. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u In comparison with other frameworks, Angular is deeply Opinionated Framework. In Big Complex Projects with many different Developers working together, Angular makes the project maintainable and helps containing the code’s consistency in the end. (thanks Stefanos : ) #1 Lovers of the Angular Power!
- 6. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Developers who want to build Web and Mobile Applications and target a wide variety of devices. (web, mobile web, native mobile and native desktop) #2 Mobile-First Focused
- 7. FrontEnders who wantto build more complex Web Applications and want to experiment with this Framework. Give it a go! A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u #3 FrontEnders with a spicy Twist
- 8. Angular Material isfor you! By simply installing and adding these components to your modules, you've got a Material-looking App that is based on Google Design Guidelines. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u #4 Google Material Lovers
- 9. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u With the use of Angular, you can experiment with different Design Patterns and explore new ways to develop more complex Applications. #5 Design Pattern Explorers
- 10. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Good choice for developing Progressive Web Apps. Work for every user, regardless of browser choice. (Stay tuned for Giorgos Kalpakas’ talk : ) #6 “Progressive” Developers
- 11. At Home Invest inyour free time at home and build some Web Apps and Reusable Components that you will probably use in the future. Invest your free time and Practice , Practice, Practice and have fun (as Aris wanted me to add : ) A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 12. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u At Work When you have a more Complex Project or Web Application to build that needs Clean Architecture from the start. Or when it’s a Project that might Grow and Scale up to something bigger in the future.
- 13. First Things First First youneed to have a good knowledge of HTML/ CSS , JavaScript & some basic knowledge of Typescript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 14. Wait for it..Then Get Comfortable with the basics of terminal commands and npm. Make some experiments with Node.js and RESTful API’s basics (GET, POST, PUT) A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 15. Finally! And nowyou are ready to go and build your first Web Apps with Angular! Conquer the basics and Level up : ) A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 16. And one more thing! Nowit’s the right time to add some spices. Get your hands dirty with this Component-based Architecture (thanks Profanis for the reminder of the name : ), and develop some cool but well structured Web Apps. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 17. And one more thing! Nowit’s the right time to add some spices. Get your hands dirty with this Component Architecture (thanks Fanis for the name : ), Design Patterns and more advanced Web App Architecture Development. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 18. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Because of the clean Architecture of Angular with Modules, Components, Templates, Metadata, Directives and Services.
- 19. From C# to Typescript Ifyou have a background on programming in C#, Typescript will be easy to learn and start using Angular. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 20. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Angular provides a base for building rich client- side applications with a specialization on Data Binding. When your Web App needs to update content in your UI when a user enters or modifies it, you can easily do that with Angular. Data Binding
- 21. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data. Two-way Data Binding
- 22. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Angular framework has various Libraries that are grouped as modules in order to build an application. Angular applications are Modular in nature and are constructed by assembling various modules. Modules may have components, services, functions and or values. Libraries and Modules is the new best thing
- 23. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u The Angular dependency injection system is hierarchical. There is a tree of injectors that parallel an app's component tree. You can reconfigure the injectors at any level of that component tree. Hierarchical Dependency Injection
- 24. Angular builds aseparate tree of dependency injectors that can be altered without reconfiguring the components. So, classes don’t have dependencies in themselves but consume them from the external source. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Hierarchical Dependency Injection
- 25. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u Testing & Debugging ✓ Unit Testing ✓ Use of End to End Testing ✓ Easy Debugging
- 26. ✓ Long-Term SupportBy Google ✓ Big Community Worldwide Support by Google A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 27. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u ✓ Reusability ✓ Readability ✓ Unit-test Friendly ✓ Maintainability 4 reasons why all together
- 28. “Which version amI using?” Angular is continuously being developed. It’s not always backwards compatible and you might spend some time updating content or versions. Versions Compatibility A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 29. You can’t alwaysfind updated Books, Tutorials or other useful stuff for the current version. But you can easily find useful blogs, videos etc from the Community. Up to date Learning Material A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 30. Right now Angularis changing versions a bit quickly and you can’t easily find updated Books, Tutorials or other useful stuff. Updated Learning Material A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u But don’t be disappointed so quickly! Angular is still a very good choice to invest time and start using it and create Awesome Stuff! : )
- 31. A N GU L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u
- 32. ▪ https://www.madewithangular.com/ ▪ https://www.wappalyzer.com/technologies/angular ▪https://material.angular.io/ ▪ https://material.angular.io/cdk/categories ▪ https://www.oreilly.com/library/view/angular-design-patterns/9781786461728/ ▪ https://medium.com/ngx-rocket/the-missing-introduction-to-angular-and-modern-design-patterns-43e8815c2801 ▪ https://www.smashingmagazine.com/2018/09/pwa-angular-6/ ▪ https://angular.io/guide/architecture ▪ https://www.protractortest.org/#/ A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8 @ l e n a l e k k o u