Angular4 Notes

  • Rangle’s Angular book 1 One Drive 1 and online handout 2
  • Valerio De Sanctis - ASP.NET & Angular 2 3 2016 One Drive 3
  • angular.io related: Latest architecture overview 4, live hero list sample 5, official cheatsheet 6
  • Archwizard: github repo 7, demo 8, npm 9, wizard 10 should be ported. angular2-wizard: npm 11, demo 12
  • Angular Botstrap ngx-bootstrap by valor-software
    • Popover 13
    • TimePicker 14
  • Angular Custom Form Controls with Reactive Forms and NgModel 15
  • Conditionally add styles to an element 16 2016.01, SO answer 17
  • TS Playground 18
  • Quickstart: Angular2 with TypeScript and Gulp 19
  • angular update guide 20
  • git repos 21 & official blog 22 & resources 23

HTTP

  • latest angular.io HttpClient 24 guide
  • Angular 4.3 HttpClient 25 (Accessing REST Web Services With Angular)
  • Introduction to Angular’s HttpClient 26 July, 2017.
  • syntaxsuccess.com: Angular 2.0 And Http 27 simple calls, observables, promises, error handling
  • cironunes/httpclient-testing github-api.model.ts 28
  • Testing HTTP requests 29
  • angular.io: Httptestingcontroller 30
  • cironunes/httpclient-testing github-api.service.spec.ts 31
  • Unit testing services with HttpClient 32 on Medium
  • Angular HttpClient get Example 33 with in memory web api, Nov 2017.

Test

  • Testing Angular 2 code with Jasmine 34, docs 35 and Karma 36.
  • Coverage with Istanbul 37
  • End-to-end Angular code using Protractor 38. When debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.Protractor Interactive Mode here 39.
  • Tests reports with karma-tfs-reporter 40
  • Test coverage reports with karma-coverage 41
  • Unit tests single run: npm test, live mode (TDD style): npm run test-watch
  • End-to-End Tests (aka. e2e, integration)
#single run, in a tab, if not already running!
npm start
#in a new tab:
npm run webdriver-start
#in another new tab:
npm run e2e
#interactive mode:
npm run e2e-live
  • it, fit, xit link 42
  • official test guide 43

Forms & Validation

  • Breeze 44
  • form-validation 45 official
  • scotch 46 angular-2-form-validation

Component Inheritance

  • extend & inherit Angular component on SO 47
  • New features in Angular 2.3 48
  • Component Inheritance in Angular 2 49 with a focus on ViewContainerRef 50 and TemplateRef 51 with a toggle sample 52
  • angular 2 component inheritance plnkr sample 53
  • plnkr style inheritance sample 54
  • component decorator metadata 55
  • plnkr sample 56 with ComponentMetadata, seems outdated

Loading Components Dynamically

  • Loading Components Dynamically in Angular 57, the graph example
  • Dynamic table sample 58 using ElementRef 1 59, 2 60, 3 61 and DynamicComponentLoader 62
  • hackish component decorator 63 from SO 64
  • selectors, resolvers and interceptors
    • UrlResolverInterceptor 65
    • SO answer UrlResolverInterceptor 66
    • refactor(core): remove ViewResolver and ViewResolverMock 67 The methods on ViewResolverMock have been merged into DirectiveResolver. BREAKING CHANGE: ES5 users can no longer use the View(…) function to provide ViewMetadata. This mirrors the removal of the @View decorator a while ago.
    • Angular 2.0 ViewResolver Class 68
    • ViewResolver resolves types to ViewMetadata. 69
    • Dynamic View and Components 70, very nice sample 71
    • ViewContainerRef 72, Represents a container where one or more Views can be attached.

Internationalization / Localization

  • ngx-translate 73 The internationalization (i18n) library for Angular
    • ngx-translate/core 74 npm install @ngx-translate/core --save
    • ngx-translate/http-loader 75 a loader for ngx-translate that loads translations with http calls npm install @ngx-translate/http-loader --save
    • Samples: demo plnkr 76, Teradata/covalent commit 77 and repo 78
  • Angular2 and i18n 79 translating your application by Michał Dymel on November 3, 2016
  • Official guide to i18n 80
  • Making Sense of Angular Internationalization (i18n) 81 Apr 10, 2017
  • Deploying an i18n Angular app with angular-cli 82 Apr 17, and Angular Translator app 83

Angular CLI

  • How to use Angular CLI with Visual Studio 2017 84 Apr17
  • Angular CLI wiki 85
  • Angular2 CLI with ASP.NET Core application - tutorial 86 oct16
  • Angular CLI With .NET Core 87 Mar17
  • .Net Core / Angular CLI - NPM Build Automation (html to cshtml) 88
  • Chrome Debugging with Angular CLI 89 on vscode recipes
  • quick start 90
npm install -g @angular/cli angular-cli typescript
ng new my-app
cd my-app
npm install
npm run start:dev /* package.json */
npm run watch -- --define eswenv=dev
webpack-dev-server --port=3000 --open
webpack --watch --progress  --profile
ng serve --open
ng generate component [name]
ng serve
npm run lite

Promise vs Observable

  • Angular - Promise vs Observable 91 8 January 2018
  • Taking advantage of Observables in Angular 92 Nov 2016
  • Angular2 observables vs. promises 93
  • rangle.io Observables vs Promises 94
  • behaviorsubject 95 an observer in addition to being an observable, Rx.BehaviorSubject class docs 96

Input Debounce

  • Debouncing Angular 2 Input Component 97
  • Angular 2 – Creating a search field with debounce time 98
  • book collection 99 on stackblitz & code 100

PrimeNG

GitRepo 101, Get Started 102, dropdown showcase 103, & docs 104, theming 105, p-table 106

Misc

  • Understanding Router State 107
  • ActivatedRoute docs 108
  • User Authentication with Angular and ASP.NET Core 109 Mar 17
  • JWT Authentication with ASP.NET Core 2 Web API, Angular 5, .NET Core Identity and Facebook Login 110 Jan 18
  • Token based authentication in ASP.NET Core 111 Oct 17
  • AspNetCore identity cookie settings 112
  • Material & CDK: badge 113, get started 114, bottom sheet 115
  • Angular Material Data Table: A Complete Example 116: Server Pagination, Filtering, Sorting; course.component.ts 117, schematics 118, grid list 119 samples
< «