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

It’s just Angular https://angular-update-guide.firebaseapp.com/

Rob Eisenberg

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

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

JS

Open source “Надстройка” над Js Транспилируется в Js Строгая типизация Особенности Open source “Надстройка” над Js Транспилируется в Js Строгая типизация ООП https://www.typescriptlang.org/play/

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

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 }     "

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

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

main.ts

app.module.ts

Domain Routed Shared Service/Core

Types of load Eager Lazy Preload

Dependency injection 1) 2) 3)

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

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

CLI ng eject https://cli.angular.io/reference.pdf https://github.com/devCrossNet/universal-cli

Структурные директивы Привязки <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

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

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 https://github.com/MarkPieszak/aspnetcore-angular2-universal