dtro-devuk Knowledge Base
A curated list of helpful material on some of my Development Stack
Angular 2 Knowledge Base
| Title | Author | Version | Group | Sub-Levels |
|---|---|---|---|---|
| Angular 2 Knowledge Base Page | dtro-devuk | 1.0 | Angular Development | 0 |
Free E-books
Introduction
- Official Angular 2 Design Docs (Google)
- Official Angular 2 - 5 min quickstart
- Angular 2 Education Rsources
- Awesome Angular 2
- Angular 2 Cookbook
- The main goals of Angular 2
My Articles
- Angular 2, a quick overview – Part 1
- Angular 2, a quick overview – Part 2
- Responsive Angular 2 Components and State, using Redux
- Angular 2 and NativeScript
- Angular 2 & NativeScript Mobile Apps -Deeper Dive
Basics
- Angular 2 Guide
- Cheat Sheet
- Style Guide
- Glossary
- What is the difference between parentheses, brackets and asterisks in Angular2?
- Is usage of Parenthesis, Barackets etc mandatory
Courses
- Angular 2 and TypeScript Beginner Web Development
- Free Course with Coursetro.com
- Angular 2 TypeScript Tutorials
- Angular 2 Fundamentals
- Modern JavaScript
- Angular Step-by-step articles (by barbarian)
- Github code for Step by Step above
Styling
CSS Encapsulation
- CSS Encapsulation with Angular Components
- All the Ways to Add CSS to Angular 2 Components
- Plunker example of above
Shadow DOM helps encapsulation, and prevent leakage of CSS from a page into the content of a main document. Why keep code separate from the rest of the page? On large sites you want to prevent CSS styling to be carefully organised and not leak from say the navigation into the main content area, where its not intended to go, and vice versa!
Bootstrap 4
- ng-Bootsrap (4)
- How to use bootstrap 4 in angular 2?
- The way to sue bootstrap 4 from npm including tether
Key Concepts
- Thinking in Angular 2 - an overview of concepts for JavaScript developers on youtube
- Getting Started in Angular 2
- 30 Learning Resources for Angular 2
Seeds
- Angular 2 Seed
- Angular 2 Seed Advanced
- Angular 2 Seed With WebPack Starter
- Angular 2 Login Seed
- Angular2-dashboard-starter
- ng-skeleton, the ultimate angular seed project
Angular CLI
SASS
- Angular CLI SASS options (stackoverflow)
- How to include SASS in components
- Compiling SASS and PostCSS with Angular CLI
- Router Transitions
- Router Animations
Animations
- Intro to Animations
- Animation Tutorials
- Collapse Demo, custom animations into seperate files
- Can you move your animations to an external file in Angular2? (stackoverflow)
- Reusable Animations (stackoverlow)
- Angular 2 - pass delay to component animation as input parameter (stackoverflow)
- Sliding Navigation
Angular 2 Modules
- Quick Start Tutorial on youtube
- Getting to Know Angular 2’s Module: @NgModule
- Shared Modules
- Import multiple angular2 components via module (stackoverflow)
Angular 2 Material
Barrels (Import Noise)
Errors
- Error in AppModule is Not an NgModule
- Can’t bind to ‘ngForIn’ since it isn’t a known native property (need to Import the ngBrowserModule)
- Cannot set property ‘stack’ of undefined
- ‘Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter’ with Angular
N.B. The following error occurs if there is any invalid HTML syntax, especially when Lazy Loading Module Components error_handler.js:50EXCEPTION: Uncaught (in promise): TypeError: Cannot set property ‘stack’ of undefined TypeError: Cannot set property ‘stack’ of undefined at SyntaxError.set [as stack] (http://localhost:4200/vendor.bundle.js:62801:61) at assignAll (http://localhost:4200/vendor.bundle.js:85404:29) at SyntaxError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:85475:16) at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:62763:16) at new SyntaxError (http://localhost:4200/vendor.bundle.js:6070:16) at DirectiveNormalizer.normalizeLoadedTemplate (http://localhost:4200/vendor.bundle.js:16708:19) at DirectiveNormalizer.normalizeTemplateSync (http://localhost:4200/vendor.bundle.js:16685:21) at DirectiveNormalizer.normalizeTemplate (http://localhost:4200/vendor.bundle.js:16662:43) at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:17904:75) at http://localhost:4200/vendor.bundle.js:18080:54 at Array.forEach (native) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18079:41) at http://localhost:4200/vendor.bundle.js:45391:58 at Array.forEach (native) at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:45390:43)
Typings (Atom Jasmine Tests etc)
- File not included in TypeScript compilation context
- Angular 2 Unit Tests: Cannot find name ‘describe’
Components
- Flattening Deep Heirarchies of Components
- Responding to component events(Rangle.io)
- Building Wunderground.com: Component Reuse on a Page
- Writing your first component - an intro (Local Weather)
- Integrating Web Components with Angular
- Angular 2 – Communication Between Components & Components Design
Collapsible Components
Spotify
RSS Feed Service Component
- BeCompany News Reader Service
- BeCompany News Readerer code GitHub
- Building Hacker News Service Component
Dynamically Injected Components
- Injecting components dynamically in Angular 2
- Rangle.io Dynamic Components
- Injecting components dynamically in Angular 2
- Engineering Game Development - ANGULAR 2 – DYNAMICALLY INJECTING COMPONENTS
- Dynamically create/inject component into specific element inside *ngFor loop
Drag and Drop Components
- Dragula - Official Angular2 wrapper
- ng2Draggable - A modular Drag-Drop framework for Angular2
- How to implement draggable components (stackoverflow)
- Draggable components - Using a Div(stackoverflow)
- Drag & Drop between Multiple Components
- Angular 2 Drag-and-Drop, without dependencies
Component Examples
Projection/ Transclusion
Forms
- Angular.io - Form Validation Cookbook
- Angular 2 Forms: Template Driven vs Model Driven (Angular University
- Building Tesla’s battery range calculator with Angular 2 reactive forms
Custom Form Controls
- Custom Form Controls in Angular by thoughtram
- Angular 2: Connect your custom control to ngModel with Control Value Accessor
Custom Form Validation
- Auth0: Angular 2 Series - Part 5: Forms and Custom Validation
- Custom Validators in Angular by thoughtram
Video
- Video: Angular Air Episode 20: Angular 2 Forms - YouTube
- Video: AngularJS 2.0 Forms - Extending Todo app with Forms Validation (Ajden Towfeek)
Services
RxJS
Angular 2 NgRx/Store
- Adding Redux With NgRx/store and Angular2 - Part 1
- Adding Redux with NgRx/store to Angular2 – Part 2 (Testing Reducers)
- Angular 2 & NgRx/store: The NgModel In Between Use Case (from Angular 1)
- Comprehensive Introduction to @ngrx/store
- Video: @ngrx/store in 10 minutes (egghead.io)
Security
Authentication
- Authentication Tutorial Part 1: Dzone
- User registration and login example and tutorial
-
Introducing angular2-jwt: A Library for Angular 2 Authentication
- Auth0 Token Based Authentication : Daily Deals App
- Auth0 - Authentication Sample
- Auth0 Angular 2 SDK Quickstarts
- GitHub - auth0-samples/auth0-angularjs2-systemjs-sample
Custom Video HTML 5
Optimisation
- Tree Shaking
- Performance Optimisation In Angular 2
- Change Detection demos
- Building an Angular 2 Application for Production
- ANGULAR 2 BEST PRACTICES: CHANGE DETECTOR PERFORMANCE
- Best Practices to Level Up
- Optimizing Angular 2 Apps - Martin Probst(youtube)
AoT Compilation & Lazy Loading, Routing
#####DO NOT Name Lazy Loaded folders with a “+” prefix
- Angular 2 Router
- Angular 2 Router 2
- Angular Router: Declarative Lazy Loading
- Angular Router: Preloading Modules
- Rangle.io Routing
- Updating Your Angular 2 App to Use the New Router: A Practical Guide
- Angular 2 NgModule Intro - Ahead Of Time Compilation And Lazy Loading - Avoid Common Pitfalls
- Learn how to use Ahead-of-time compilation (angular.io)
- The Angular 2 Compiler Tobias Bosch
- Configure AOT for Angular CLI
- angular2-lazy-load-example
- Angular 2 Router Crash Course - Build a Navigation Menu with Bootstrap 4
- Angular Router: Declarative Lazy Loading
- Routing Angular 2 Applications : Lesson 15 of 23 (Scotch)
- Routing Angular 2 Single Page Apps with the Component Router
- Angular 2 Series - Part 4: Component Router In-Depth (Jan 2016)
- Angular 2 NgModule Intro - Ahead Of Time Compilation And Lazy Loading - Avoid Common Pitfalls
- Angular 2 Routing with Modules - plunker Adv Heroes
- Angular 2 Routing with Modules - plunker Adv Heroes with Login
- ANGULAR ROUTER: EMPTY PATHS, COMPONENTLESS ROUTES, AND REDIRECTS
- ROUTING IN ANGULAR REVISITED
Guards
Preventing Name Collisions (Providers)
Fallback Routes
Language Translations
Dashboards
- Dashboard, uses Modules, Components, Lazy Loading, Routing and AOT Compilation (GitHub)
- Admin panel framework based on Angular 2, Bootstrap 4 and Webpack
- Blur Admin Panel
- Angular 1 - Material Dashboard
- Joes Dashboard (Plunker)
Apps and Tutorials
- Angular kitchen sink
- Angular JS Chat with Loopback
- [MEAN Stack App on youtube] (https://youtu.be/tYkb2Qu4UmM)
- Build your Angular 2 App: From Auth to calling an API (Auth0.com)
- John Papa Tour of Heroes
- 5 Best Opensource Projects Built using Angular 2
- Demo of Admin Panel Framework
- Admin Panel Framework - Github code
Example Custom Components
- Responsive Components
- Responsive Carousel
- Angular 2 SlideShow
- Angular2 TypeScript Carousel
- Building a Feed Service
- Building a Feed Service BeCompnay Github
- NewsReader Example
- Building Hacker News Component
- Building Hacker News Component GitHub Code
- Revisting Realtime Angular 2
- Angular 2 and instantiation of a camera stream with html 5 video
Awesome Demos
Including 3rd Party Languages
- Include External JavaScript Libraries In An Angular 2 TypeScript Project
- How to use third-party javascript library (pixijs)
Visual Studio 2015 & Angular 2
- TypeScript Tools for VS 2015 2.1.5.0
- NPM Task Runner
- Angular 2 : Getting off the Starting Line
- How To: Visual Studio 2015 & Angular 2
- Developing And Deploying An Angular 2 Application With Visual Studio 2015
- Angular 2 (rc1) 5 Minute QuickStart using Angular Cli with ASP.NET 5 in Visual Studio 2015
- Using BrowserSync with Visual Studio
- Angular 2 in ASP.NET Core 1.0 using Visual Studio Code and TypeScript
- Angular 2 in Visual Studio 2015
- Angular Development with Visual Studio and Windows
- How to Use BrowserSync for Faster Development