2. Обо мне
.Net C#/F# developer
MSP

3. It’s just Angular

5. Rob Eisenberg

6. Выразительная
разметка
2 типа связей
Модульность
Встроенные средства работы с бекендом
Продуктивность
Современность

7. Компоненты
Модули
Rx.js
TypeScript
Shadow DOM

8. JS

9. Open source “Надстройка” над Js Транспилируется в Js Строгая типизация
Особенности
Open source
“Надстройка” над Js
Транспилируется в Js
Строгая типизация
ООП

10. JavaScript динамические типы
Хорошие стороны
Плохие строны
Переменные могут содержать любые объекты
Определение типов данных “на лету”
Неявное приведение типов
Трудно обеспечить передачу правильных типов данных без тестов
Не все разработчики используют ===
Множество строк кода в комерческих приложениях для провеки на типы данных

11. tsconfig.json { "compilerOptions": { "target": "es5",
        "removeComments": true,
        "outFile": "../../built/local/tsc.js"
    },
    "files":[
        "app.ts",
        "interfaces.ts",
        "classes.ts",
    ],
    "exclude":[
        "wwwroot",
        "node_modules"
"compileOnSave": true }
    "

13. Импорт функционала
Метаданные и
Шаблон
Код

14. Компоненты
Модуль
Компоненты
main.ts
app.module
Компоненты
Модуль

16. main.ts

17. app.module.ts

18. Domain
Routed
Shared
Service/Core

19. Types of load
Eager
Lazy
Preload

20. Dependency injection 1) 2) 3)

21. Файлы в проекте package.json – пакеты и зависимости tsconfig.json – ts
typings.json – заголовочные файлы в проекте

22. Что нужно сделать чтобы запустить Angular 2
Создать tsconfig.json
Cоздать package.json
Создать typings.json
Установить библиотеки
Создать index.html
Создать app.module.ts
Создать main.ts

24. CLI ng eject https://cli.angular.io/reference.pdf

25. Структурные директивы
Привязки
<div *ngIf="condition">...</div>
<li *ngFor="let item of items">...</li>
<h1> {{name}}!</h1> - одностороняя привязка
<input [value]="name" />
[value]="name” ~ value="{{name}}“
<input [(ngModel)]="name" > - двустороняя
<button (click)="">
<div *ngIf=”condition; else elseBlock”></div> <template #elseBlock></template>
Фильтры-трансформаторы
<p> {{ cars | json }}</p>
Json, slice:start[:end], uppercase, lowercase, number, percent, date:[format], currency, async

29. Shadow DOM Global css ComponentOne css ComponentTwo css
ComponentThree css
ComponentFour css

32. Angular2 with Asp.NET Core
npm install -g yo
npm install -g yo generator- aspnetcore-spa
npm install -g webpack
yo aspnetcore-spa
dotnet run