angular-ninja

The way to be an Angular ninja

ng4-ninja

Top 8 Resources to Explore Angular v4 - https://medium.com/@dormoshe/top-8-resources-to-explore-angular-4-ff2c1b42020a

• Ok… let me explain: it’s going to be Angular 4.0, or just Angular - http://angularjs.blogspot.co.il/2016/12/ok-let-me-explain-its-going-to-be.html
• The Next Version of Angular is Angular v4 - https://scotch.io/bar-talk/the-next-version-of-angular-is-angular-v4
• 5 Features To Watch Out For in Angular v4 - https://scotch.io/tutorials/5-features-to-watch-out-for-in-angular-4
• Server Side Rendering With Angular 4 - https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx
• New in Angular 4 — Improved Reactive Programming Support - http://blog.angular-university.io/new-in-angular-4-better-reactive-programming-support
• Angular — Advanced Styling Guide (v4+) - https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635
• A Taste from Angular Version 4 - https://netbasal.com/a-taste-from-angular-version-4-50be1c4f3550
• Angular 4 Features Depreciations and New Changes - http://seowebsitedesigning.com/angular-js-4-features-depreciations-and-new-changes

ng2-ninja

Motivation

• Video - Motivation - The Decision Maker's Guide - Why You Should Move to Angular 2.0 Now - http://rangle.io/resources/decision-makers-guide-why-you-should-move-angular-2-now/
• Why Angular 2 - http://angular-2-training-book.rangle.io/handout/why_angular_2.html

Starting Point

• Video - Introduction - Thinking in Angular 2, Getting Started, Going Further - http://rangle.io/resources/thinking-in-angular-2-overview-of-key-angular-2-concepts-for-angular-1-traditional-javascript-developers/
• Bootstrapping your first Angular 2 application - https://toddmotto.com/bootstrap-angular-2-hello-world

Architecture & Building Blocks

• Video (Short) - https://www.youtube.com/watch?v=PELRx7zYbPk
• Architecture & Building Blocks - https://angular.io/docs/ts/latest/guide/architecture.html

Components

• Creating Your First Angular 2 Components - https://scotch.io/tutorials/creating-your-first-angular-2-components
• Components Interaction - https://angular.io/docs/ts/latest/cookbook/component-communication.html
• Event Emmiters - https://toddmotto.com/component-events-event-emitter-output-angular-2
• Video - Components & Data Flow - https://www.youtube.com/watch?v=I-EiQD3x8xY
• Video - Two Way Databinding - https://www.youtube.com/watch?v=-ZVZzq4xhv0

Dependency injuction

• Dependency Injection In Angular 2 - http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
• Formal Doc - Dependency injuction - https://angular.io/docs/ts/latest/guide/dependency-injection.html
• Formal Doc - Hierarchical Injectors - https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Forms

• Reactive Forms - Two Ways: Naive Building & Form Builder - http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
• Video - Form Builder - https://www.youtube.com/watch?v=LyRgKQjsGa4

Change Detection

• Change Detection Explained - http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
• Video - https://www.youtube.com/watch?v=CUxD91DWkGM

Lifecycle

• Formal Doc - Lifecycle Hooks - https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
• Hook Example on Plunker - http://plnkr.co/edit/0ysVkNc6jojvlflrG5ll?p=preview
• Component Lifecycle Hooks - https://medium.com/front-end-hacking/angular-2-component-lifecycle-hooks-fa5a84b4b64d#.kyhx93xww
• Video - Lifecycle Hooks - https://www.youtube.com/watch?v=bY92HFyaBvo

Upgrade adapter

• Formal Angular Team Tutorial (Chapter 2) - https://angular.io/docs/ts/latest/guide/upgrade.html#!#upgrading-with-the-upgrade-adapter
• Overview and good code examples - http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
• Video - http://rangle.io/resources/how-to-start-using-angular-2-with-your-angular-1-code-base/

Routing

• Video - https://www.youtube.com/watch?v=d8yAdeshpcw
• Routing Revisited - http://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

Reactive Programming

• Functional Reactive JavaScript - Video - https://www.youtube.com/watch?v=mmWCuSxSXeY&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&index=15
• Reactive Angular2 with ngRx - https://www.youtube.com/watch?v=mhA7zZ23Odw
• Video - Angular 2 Http - Working with RxJS Observables - https://www.youtube.com/watch?v=BzmuEhBc3yk&index=8

Fresh Approach to Style

• Video - Angular 2's Fresh Approach to Style (ng conf) - https://www.youtube.com/watch?v=J5Bvy4KhIs0
• Styling Angular 2 Components (Basics) - http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html
• View Encapsulation - https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

Full App Tutorial

• Video - An Angular 2 Force Awakens By John Papa - https://www.youtube.com/watch?v=WAPQF_GA7Qg
• Github - John Papa Tour of Heroes Source Code - https://github.com/johnpapa/angular2-tour-of-heroes
• List of Videos - - https://www.youtube.com/watch?v=r7EhBTPlQkk&list=PL55RiY5tL51rslbEyCA6Gm2mRQ9VJxAYh

Testing

• Part 1 - https://developers.livechatinc.com/blog/testing-angular-2-apps-part-1-beginning/
• Part 2 - https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/

Typescript

• Video - https://www.youtube.com/watch?v=dzPjBWLdGz0
• Video - Typescript: Angular 2's Secret Weapon (ng conf) - https://www.youtube.com/watch?v=e3djIqAGqZo

General

• Formal Api Reference - https://angular.io/docs/ts/latest/api/
• Angular Cookbook - https://angular.io/docs/ts/latest/cookbook/
• List Of Videos - Angular 2 Quickstart Tutorials 2016 - https://www.youtube.com/playlist?list=PL55RiY5tL51olfU2IEqr455EYLkrhmh3n
• John Papa - About the master - https://johnpapa.net/about/