An Overview of Angular+
By Dmytro Golysh
About Me
About Me
About Me
Agenda
• About Angular
• TypeScript (Types, Classes, Modules, Interfaces, Generics, Decorators)
• Angular architecture overview
• Angular structure
• Angular Components, Templates, Directives, Pipes
• Angular Data binding
• Routing
• Forms
• Change detection
• Advanced features
About Angular
- Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.
- Developed by Google
- Angular empowers developers to build applications that live on the web, mobile, or the desktop
About Angular: Features
About Angular: Features
History
TypeScript was first made public in October 2012 (at version 0.8), after two years of internal development at Microsoft
Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo Pascal, has worked on the development of TypeScript
TypeScript
Language benefits
- OOP, Classes support
- Modules
- Static type checking
- Search errors on preparing stage at compilation time
- ES6 feature support
- Similar syntax to BE languages, such as: C#, Java
- Superset of JavaScript
TypeScript
TypeScript
TypeScript
TypeScript
TypeScript
TypeScript
TypeScript
TypeScript
TypeScript
And many other interesting stuff
TypeScript
Angular: Modules
Angular: Modules
Angular: Components
Angular: Components
Angular: Component LifeCycle
Angular: Component LifeCycle
and etc ...
Angular: Component LifeCycle
Angular: Directives
Structural directives—change the DOM layout by adding and removing DOM elements.
Angular: Directives
An Attribute directive changes the appearance or behavior of a DOM element.
Angular: Directives
Angular: Pipes
Angular: Templates
Angular: Data Binding
Angular: Data Binding
Angular: Services
Angular: Routing config
Angular: Routing directives
Angular: Lazy Loading route
Angular: Forms
Angular: Forms
Angular: Forms
Angular: Forms
Angular: Change detection
Angular: Change detection
Angular: Change detection
Angular: Change detection
Angular: Change detection
Default strategy
OnPush strategy
Angular: Advanced
Compiler
Angular: Advanced
Redux
Angular: Advanced
ng new [PROJECT_NAME]
Angular: Advanced
Debugging
Angular: Advanced
Angular 6+. News, Insides, etc...
RxJS 6
new Render - Ivy
