Angular4 notes
Links
- Rangle’s Angular book and online handout
- Valerio De Sanctis - ASP.NET & Angular 2 2016
- angular.io related: Latest architecture overview, live hero list sample, official cheatsheet
- Archwizard: github repo, demo, npm, wizard should be ported.
angular2-wizard
: npm, demo - Angular Botstrap
ngx-bootstrap
by valor-software - Angular Custom Form Controls with Reactive Forms and NgModel
- Conditionally add styles to an element 2016.01, SO answer
- TS Playground
- Quickstart: Angular2 with TypeScript and Gulp
- angular update guide
- git repos & official blog & resources
http
- latest angular.io HttpClient guide
- Angular 4.3 HttpClient (Accessing REST Web Services With Angular)
- Introduction to Angular’s HttpClient July, 2017.
- http simple calls, observables, promises, error handling
- httpclient-testing/github-api.model.ts
- Testing HTTP requests
- https://angular.io/api/common/http/testing/HttpTestingController
- httpclient-testing/github-api.service.spec.ts
- Unit testing services with HttpClient on Medium
- Angular HttpClient get Example with in memory web api, Nov 2017.
test
- Testing Angular 2 code with Jasmine, docs and Karma.
- Coverage with Istanbul
- End-to-end Angular code using Protractor. 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.
- Tests reports with karma-tfs-reporter
- Test coverage reports with karma-coverage
- 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- official test guide
forms & validation
- Breeze
- form-validation official
- scotch angular-2-form-validation
component inheritance
- extend & inherit Angular component on SO
- New features in Angular 2.3
- Component Inheritance in Angular 2 with a focus on ViewContainerRef and TemplateRef with a toggle sample
- angular 2 component inheritance plnkr sample
- plnkr style inheritance sample
- component decorator metadata
- plnkr sample with ComponentMetadata, seems outdated
loading components dynamically
- Loading Components Dynamically in Angular, the graph example
- Dynamic table sample using ElementRef 1, 2, 3 and DynamicComponentLoader
- hackish component decorator from SO
- selectors, resolvers and interceptors
- UrlResolverInterceptor
- SO answer UrlResolverInterceptor
- refactor(core): remove
ViewResolver
andViewResolverMock
The methods onViewResolverMock
have been merged intoDirectiveResolver
. BREAKING CHANGE: ES5 users can no longer use theView(…)
function to provideViewMetadata
. This mirrors the removal of the@View
decorator a while ago. - Angular 2.0 ViewResolver Class
- ViewResolver resolves types to ViewMetadata.
- Dynamic View and Components, very nice sample
- ViewContainerRef, Represents a container where one or more Views can be attached.
internationalization / localization
- ngx-translate The internationalization (i18n) library for Angular
- ngx-translate/core
npm install @ngx-translate/core --save
- ngx-translate/http-loader a loader for ngx-translate that loads translations with http calls
npm install @ngx-translate/http-loader --save
- Samples: demo plnkr, Teradata/covalent commit and repo
- ngx-translate/core
- Angular2 and i18n translating your application by Michał Dymel on November 3, 2016
- Official guide to i18n
- Making Sense of Angular Internationalization (i18n) Apr 10, 2017
- Deploying an i18n Angular app with angular-cli Apr 17, and Angular Translator app
Angular CLI
- How to use Angular CLI with Visual Studio 2017 Apr17
- Angular CLI wiki
- Angular2 CLI with ASP.NET Core application - tutorial oct16
- Angular CLI With .NET Core Mar17
- .Net Core / Angular CLI - NPM Build Automation (html to cshtml)
- Chrome Debugging with Angular CLI on vscode recipes
- quick start
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 8 January 2018
- Taking advantage of Observables in Angular Nov 2016
- Angular2 observables vs. promises
- rangle.io Observables vs Promises
- behaviorsubject an observer in addition to being an observable, Rx.BehaviorSubject class docs
input debounce
- Debouncing Angular 2 Input Component
- Angular 2 – Creating a search field with debounce time
- book collection on stackblitz & code
PrimeNG
GitRepo, Get Started, dropdown showcase, & docs, theming, p-table
misc
- Understanding Router State
ActivatedRoute
docs- User Authentication with Angular and ASP.NET Core Mar 17
- JWT Authentication with ASP.NET Core 2 Web API, Angular 5, .NET Core Identity and Facebook Login Jan 18
- Token based authentication in ASP.NET Core Oct 17
- AspNetCore identity cookie settings
- Material & CDK: badge, get started, bottom sheet
- Angular Material Data Table: A Complete Example: Server Pagination, Filtering, Sorting; course.component.ts, schematics, grid list samples