Rolling Scopes School Presentation Task

slides source code: https://github.com/aleksei-bulgak-study/presentation
gh-pages: https://aleksei-bulgak-study.github.io/presentation/

Transcription:

Intro
Hello. Today I will talk to you about Angular.
Angular is a web framework developed by Google and the latest version of Angular is written in TypeScript.

History of Angular
The history of Angular presented on the current slide. The main changes were brought between the first and second version, cause second version was fully rewritten using TypeScript

TypeScript
TypeScript is language developed by Microsoft. It is a superset of JavaScript and its main feature is that it is statically typed.
This gives you the ability to catch a lot of errors, mistakes and find bugs at compilation phase and not during runtime.
Also Angular provides more clear inheritance, some additional structures like Decorator.
Modern IDEs have better support of statically typed languages and provide you code autocompletion and better navigation.

Architecture
So let's take a look at Angular architecture.
Today we will talk about such structurer of Angular and start with NgModule.
Angular it is a modular framework and it is divided into small pieces called modules.
Angular supports ES6 modules and also provides a structure called NgModule.

@NgModule
NgModule it is a basic JS class with additional decorator called @NgModule with metadata.
In metadata, you can specify other modules that you want to import in your module. You can use @Components from imported modules.
You can specify services, Components that you want to render
You can specify Components that you want to export. And modules that will import your module can use exported components.

Model is a basic building block and entry point of your application. During startup, you need to specify some module.

Angular support built-in modules and you can use them out of the box.

@Component
A component is a basic building block of an Angular application.
Components can be chained or can be organized in complex structures.

The Component also a JS class with its own Decorator(@Component).
You can specify services that you want to use/inject in Component's metadata. A component can not exist without a template file. Template it is an HTML file that you can specify as a value in templateURL or you can use an inline template and specify it in template property.

Template it is a basic HTML file with additional Angular syntax.

@Directive.
In some cases, we can perform actions with DOM. You can create your own directive or use built-in directive. Currently Angular support 2 types of directive:
- Structural directive. It changes DOM structure
- Attribute directive. It updates attributes of DOM elements and does not create new DOM elements

Data Binding.
When we have components and templates then we want to configure some interaction between this structures.
Without Angular, you need to code this interaction by your own(query dom and using events).
Angular supports 3 types of data binding:
- Interpolation. Renders values from Components on Template.
- Property Binding. Help to interact between child and parent components. Values from parent components can be passed to a child component
-Event binding. Reverse action - trigger changes in parent component based on changes in child component. For example, 'click' event on child component can call a method from a parent component.

Services
As Angular is modular framework developers decided to split logic related to HTML rendering and the logic related to calculation or HTTP communication.
Angular provides service with the help of Injector instance.

Dependency Injection principle.
The idea of DI is that dependency is injected with a side component that manages dependencies.
When Component/NgModule needs some dependencies it asks Injector for it and Injector checks and provides dependency if it already has an instance of it or creates a new instance and return it to the consumer.

Angular supports 3 types of injection.
First is to specify 'provideIn' property in the @Injectable decorator. You can specify a value as 'root' and in this case, Injector creates a singleton instance of this service and provides it to all consumers.
The second way is to specify a list of providers in the NgModule decorator. As a result, this module will have access to specified services.
And we can specify services in @Component's metadata

Thanks.