translate 'component' chapter #5

ViktoryiaR · 2019-09-30T07:18:00Z

@Tibing, could you please review?

Tibing · 2019-10-01T14:28:44Z

component.md


-In [Service-Oriented Architecture \(SOA\) vs. Component Based Architecture](http://petritsch.co.at/download/SOA_vs_component_based.pdf), Helmut Petritsch defines a component as follows:
+В своей статье [Сервис-ориентированная архитектура (SOA) vs. Компонентная Архитектура](http://petritsch.co.at/download/SOA_vs_component_based.pdf) Хельмут Петритш определяет компонент следующим образом:


Suggested change

В своей статье [Сервис-ориентированная архитектура (SOA) vs. Компонентная Архитектура](http://petritsch.co.at/download/SOA_vs_component_based.pdf) Хельмут Петритш определяет компонент следующим образом:

В своей статье [Сервис-ориентированная архитектура \(SOA\) vs. Компонентная Архитектура](http://petritsch.co.at/download/SOA_vs_component_based.pdf) Хельмут Петритш определяет компонент следующим образом:

Tibing · 2019-10-01T14:35:06Z

component.md


-> A component is a software object, meant to interact with other components, encapsulating certain functionality or a set of functionalities. A component has a clearly defined interface and conforms to a prescribed behaviour common to all components within an architecture.
+> Компонент - это программный объект, предназначенный для взаимодействия с другими компонентами, инкапсулирующий определенный функционал или набор функционалов. Компонент имеет четко определенный интерфейс и соответствует предписанному поведению, общему для всех компонентов в архитектуре.


инкапсулирующий определенный функционал или набор функционалов

вот это вот прям сложно) Давай попроще напишем

Tibing · 2019-10-01T14:42:44Z

component.md


-In Web applications, **a component controls a patch of screen called a view**. It's a part of what you will eventually see on the screen. It has a template, which defines its visual structure. It also has logic which defines the behavior and the dynamic values. The logic part is JavaScript code and is called the controller.
+В веб-приложениях **компонент контролирует участок экрана, называемый представлением (view)**. Это часть того, что вы в конечном итоге увидите на экране. У него есть шаблон, который определяет его визуальную структуру. У него также есть логика, которая определяет его поведение и динамические значения. Логическая часть - это JavaScript код и называется она контроллером (controller).


Suggested change

В веб-приложениях **компонент контролирует участок экрана, называемый представлением (view)**. Это часть того, что вы в конечном итоге увидите на экране. У него есть шаблон, который определяет его визуальную структуру. У него также есть логика, которая определяет его поведение и динамические значения. Логическая часть - это JavaScript код и называется она контроллером (controller).

В веб-приложениях **компонент контролирует участок экрана, называемый представлением \(view\)**. Это часть того, что вы в конечном итоге увидите на экране. У него есть шаблон, который определяет его визуальную структуру. У него также есть логика, которая определяет его поведение и динамические значения. Логическая часть - это JavaScript код и называется она контроллером \(controller\).

Tibing · 2019-10-01T14:57:42Z

component.md

@@ -26,9 +28,9 @@ export class AppComponent {
 {% endcode-tabs-item %}
 {% endcode-tabs %}

-It has one member called "title". It is a property to which you can assign a value. The value assigned to it here is the string "app".
+У него есть один элемент с именем "title". Это свойство (property), которому вы можете присвоить значение. Здесь ему присваивается значение "app".


Suggested change

У него есть один элемент с именем "title". Это свойство (property), которому вы можете присвоить значение. Здесь ему присваивается значение "app".

У него есть один элемент с именем "title". Это свойство \(property\), которому вы можете присвоить значение. Здесь ему присваивается значение "app".

Я, кстати, не уверен на счет употребления слова "элемент". может, лучше везде поменять на "переменная"?) Мне глаза режет 😸

а я вот насчет "переменная" не уверена) "элемент" тут используется как абстрактное понятие, типо некий айтем, а дальше идет пояснение, что это свойство класса.

Tibing · 2019-10-01T15:03:23Z

component.md

@@ -40,21 +42,21 @@ Angular takes care of synchronizing the members of the component with the compon
 {% endcode-tabs-item %}
 {% endcode-tabs %}

-The double curly braces and their content are called **Interpolation**. This is one form of **data binding** in Angular. As we mentioned before, the code in this file is not used as-is when the browser renders the component. Angular compiles it to JavaScript code. In one of the compilation steps, it looks for Interpolations inside the template. The content of the Interpolation is an "Angular template expression" \(which is a lot like JavaScript\). The expression is evaluated at runtime, and then you see the result.
+Двойные фигурные скобки и их содержание называются **интерполяцией (interpolation)**. Это одна из форм **привязки данных (data binding)** в Angular. Как мы упоминали ранее, код в этом файле не используется как есть, когда браузер отображает компонент. Angular компилирует его в JavaScript код. На одном из этапов компиляции он ищет интерполяции внутри шаблона. Содержимое интерполяции - это "шаблонное выражение Angular (Angular template expression)" \(оно очень похоже на JavaScript\). Выражение вычисляется во время выполнения - в рантайме (runtime) - а затем вы видите результат.


Suggested change

Двойные фигурные скобки и их содержание называются **интерполяцией (interpolation)**. Это одна из форм **привязки данных (data binding)** в Angular. Как мы упоминали ранее, код в этом файле не используется как есть, когда браузер отображает компонент. Angular компилирует его в JavaScript код. На одном из этапов компиляции он ищет интерполяции внутри шаблона. Содержимое интерполяции - это "шаблонное выражение Angular (Angular template expression)" \(оно очень похоже на JavaScript\). Выражение вычисляется во время выполнения - в рантайме (runtime) - а затем вы видите результат.

Двойные фигурные скобки и их содержание называются **интерполяцией \(interpolation\)**. Это одна из форм **привязки данных \(data binding\)** в Angular. Как мы упоминали ранее, код в этом файле не используется как есть. Когда браузер отображает компонент, Angular компилирует его в JavaScript код. На одном из этапов компиляции он ищет интерполяции внутри шаблона. Содержимое интерполяции - это "шаблонное выражение Angular \(Angular template expression\)" \(оно очень похоже на JavaScript\). Выражение вычисляется во время выполнения - в рантайме \(runtime\) - а затем вы видите результат.

Tibing · 2019-10-03T16:13:56Z

component.md


-Interpolation is one of the strongest, most basic features in Angular. It has existed from the very beginning of Angular - in the first version \(AngularJS\). It makes it really simple to insert dynamic data into the view.
+Интерполяция - одна из самых сильных и основных функций Angular. Она существует с самого начала Angular - с самой первой версии \(AngularJS\) - и позволяет очень легко вставлять динамические данные в представление.


Интерполяция - одна из самых сильных и основных функций Angular
Очень странно звучит :D

Tibing · 2019-10-03T16:16:20Z

component.md

+* Поставьте фигурные скобки обратно и замените содержимое каким-нибудь математическим выражением, например: `{{2 + 2}}`. \(Пробелы не обязательны, они просто делают код более читабельным.\)
+* Напишите математическое выражение в сочетании с элементом `title`: `{{title + 10}}`
+* Передайте в выражение неопределенную переменную - переменную, которая не была объявлена в классе компонента. Например: `{{x}}`
+* Попробуйте что угодно. Не волнуйтесь - вы не можете навредить браузеру или компьютеру! В худшем случае браузеру не хватит памяти и он застрянет. \(Но для этого нужно написать что-то действительно сложное!\)


Не волнуйтесь - вы не можете навредить браузеру или компьютеру!
Золотые слова)

Tibing · 2019-10-03T16:18:33Z

component.md


 ## Inline Template

-Let's move the template to be **inline** in the component definition. This will help us manage the template while looking at its functionality. In the file `app.component.ts` replace the line
+Давайте переместим шаблон, чтобы он стал **встроенным (inline)** в определении компонента. Это поможет нам управлять им, одновременно глядя на его функциональность. В файле `app.component.ts` замените строку


Suggested change

Давайте переместим шаблон, чтобы он стал **встроенным (inline)** в определении компонента. Это поможет нам управлять им, одновременно глядя на его функциональность. В файле `app.component.ts` замените строку

Давайте переместим шаблон, чтобы он стал **встроенным (inline)** в определение компонента. Это поможет нам управлять им, одновременно глядя на его функциональность. В файле `app.component.ts` замените строку

Tibing · 2019-10-03T16:19:37Z

component.md


-Make sure you replace `templateUrl` with `template`, and don't forget the comma at the end of the line.
+Убедитесь, что вы заменили `templateUrl` на` template`, и не забывайте запятую в конце строки.


Suggested change

Убедитесь, что вы заменили `templateUrl` на` template`, и не забывайте запятую в конце строки.

Убедитесь, что вы заменили `templateUrl` на` template`, и не забудьте запятую в конце строки.

Tibing · 2019-10-03T16:23:23Z

component.md

-> * After generating a project, add it to the configuration so that components generated from this point on will have an inline template: `ng set defaults.component.inlineTemplate true`. \(From version 6 you'll need to use the command `ng config projects.YOURPROJECTNAME.schematics.@schematics/angular:component.inlineTemplate true` instead\) This adds the line `inlineTemplate: true` in the Angular CLI configuration file `.angular-cli.json` \(`angular.json` in version 6\). You can also edit the file directly.
-> * If you haven't configured to have inline templates as a default, you can specify this per component when you generate it, by passing the flag `-it` or `--inline-template`. For example: `ng generate header -it`.
+> * При создании проекта передать флаг `-it` или `--inline-template` следующим образом: `ng new todo-list -it`
+> * После создания проекта добавить его в конфигурацию, чтобы компоненты, созданные с этого момента, имели встроенный шаблон: `ng set defaults.component.inlineTemplate true`. \(Начиная с версии 6 вам нужно будет использовать команду `ng config projects.YOURPROJECTNAME.scmatics.@schematics/angular:component.inlineTemplate true`\). Это добавляет строку `inlineTemplate: true` в конфигурационный файл Angular CLI. `.angular-cli.json` \(`angular.json` в версии 6 \). Вы также можете редактировать этот файл напрямую.


я не уверен, что нам нужно упоминание о 6 версии, у всех должна быть последняя

translate 'component' chapter

d53549a

Tibing suggested changes Oct 3, 2019

View reviewed changes

ViktoryiaR added 2 commits October 6, 2019 19:14

misc improvements

6875ab9

translate 'property-binding' chapter

f90a10a

ViktoryiaR force-pushed the translate-component branch from 8923464 to f90a10a Compare October 7, 2019 06:53

translate 'event-binding' chapter - in progress

bfeb6e3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translate 'component' chapter #5

translate 'component' chapter #5

ViktoryiaR commented Sep 30, 2019

Tibing Oct 1, 2019

Tibing Oct 1, 2019

Tibing Oct 1, 2019

Tibing Oct 1, 2019

Tibing Oct 1, 2019

ViktoryiaR Oct 6, 2019

Tibing Oct 1, 2019

Tibing Oct 3, 2019

Tibing Oct 3, 2019

Tibing Oct 3, 2019

Tibing Oct 3, 2019

Tibing Oct 3, 2019


		In [Service-Oriented Architecture \(SOA\) vs. Component Based Architecture](http://petritsch.co.at/download/SOA_vs_component_based.pdf), Helmut Petritsch defines a component as follows:
		В своей статье [Сервис-ориентированная архитектура (SOA) vs. Компонентная Архитектура](http://petritsch.co.at/download/SOA_vs_component_based.pdf) Хельмут Петритш определяет компонент следующим образом:


		> A component is a software object, meant to interact with other components, encapsulating certain functionality or a set of functionalities. A component has a clearly defined interface and conforms to a prescribed behaviour common to all components within an architecture.
		> Компонент - это программный объект, предназначенный для взаимодействия с другими компонентами, инкапсулирующий определенный функционал или набор функционалов. Компонент имеет четко определенный интерфейс и соответствует предписанному поведению, общему для всех компонентов в архитектуре.


		In Web applications, a component controls a patch of screen called a view. It's a part of what you will eventually see on the screen. It has a template, which defines its visual structure. It also has logic which defines the behavior and the dynamic values. The logic part is JavaScript code and is called the controller.
		В веб-приложениях компонент контролирует участок экрана, называемый представлением (view). Это часть того, что вы в конечном итоге увидите на экране. У него есть шаблон, который определяет его визуальную структуру. У него также есть логика, которая определяет его поведение и динамические значения. Логическая часть - это JavaScript код и называется она контроллером (controller).

	У него есть один элемент с именем "title". Это свойство (property), которому вы можете присвоить значение. Здесь ему присваивается значение "app".
	У него есть один элемент с именем "title". Это свойство \(property\), которому вы можете присвоить значение. Здесь ему присваивается значение "app".


		Interpolation is one of the strongest, most basic features in Angular. It has existed from the very beginning of Angular - in the first version \(AngularJS\). It makes it really simple to insert dynamic data into the view.
		Интерполяция - одна из самых сильных и основных функций Angular. Она существует с самого начала Angular - с самой первой версии \(AngularJS\) - и позволяет очень легко вставлять динамические данные в представление.

	Давайте переместим шаблон, чтобы он стал встроенным (inline) в определении компонента. Это поможет нам управлять им, одновременно глядя на его функциональность. В файле `app.component.ts` замените строку
	Давайте переместим шаблон, чтобы он стал встроенным (inline) в определение компонента. Это поможет нам управлять им, одновременно глядя на его функциональность. В файле `app.component.ts` замените строку


		Make sure you replace `templateUrl` with `template`, and don't forget the comma at the end of the line.
		Убедитесь, что вы заменили `templateUrl` на` template`, и не забывайте запятую в конце строки.

translate 'component' chapter #5

Are you sure you want to change the base?

translate 'component' chapter #5

Conversation

ViktoryiaR commented Sep 30, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment