Table of Contents generated with DocToc

• I. Angular for busy devs
  • Angular App Architecture
    • Automate deployments using Gulp or Webpack
    • Webpack
    • 2. Typescript Fundamentals
    • 3. Building Blocks of Angular App
    • 4. Displaying Data and Handling Events
    • 5. Building Reusable Components
    • 6. Directives
    • 7. Template driven forms
  • 8. Reactive forms
  • 9. Consuming HTTP Services
  • 10. Routing and Navigation
• II) Automated testing, Unit Testing, Test Driven Design
  • 2. Test Driven Dev - Red, Green, Refactor
  • 3. Unit testing
    • 3.1 Angular Tests with Jest
    • 11.3.2 Unit Testing RxJs with Marble Diagrams
• III. NgRx Implementation - REDUX Store in Angular
• IV. Small Redux Store
• V. Angular interview questions

I. Angular for busy devs

Go and study:

• Angular development

• Building Blocks of Angular App

Angular App Architecture

To make you curious:

Automate deployments using Gulp or Webpack

npm i gulp --save-dev One way to automate the build of distributables=web dev artifacts and the copying process on the server is to use Gulp. Look into gulpfile.js

gulp.task("Copy-dist-to-wwwroot", () => {
    return gulp.src("./dist/TaskManager/**/*")
        .pipe(gulp.dest("C:\\Angular\\MvcTaskManager\\MvcTaskManager\\wwwroot"));
});

// by default, whach the dist folder, any time the any of the files from dist folder changes, then copy the files on the server to render
gulp.task("default", () => {
    gulp.watch("./dist/TaskManager", gulp.series("Copy-dist-to-wwwroot"));
});

ng build --watch #starts Angular app and watches for changes
# open new terminal window and start gulp:
gulp #each ttime code is changed it recompiles the app and copies dist files into wwwroot

or detailed Gulp task runner configuration done witht RxJs

Webpack

Angular's CLI uses a tool called Webpack, which is a build automation tool. It gets all of our scripts and style sheets,combines them, puts them in a bundle, and then minifies that bundle, and this is for optimization.

Each time you change your code Webpack automatically recompiles your application and refreshes your bundles(Hot Module Replacement).

Webpack automatically injects all the scripts into our index.html, at runtime: tyles.bundle.js is a container for all the styles of the app compiled into one bundle

No need to do it with Angular CLI, but just to mention it (a full webpack config and doc is here): https://github.com/bitaemi/React-app-Hooks-Context-reducers/tree/master/webpack-configs-apps

2. Typescript Fundamentals

• 2. Types
  • Type Assertions
  • Arrow Functions
  • Interfaces
  • Classes, Objects, Constructors
  • Access modifiers, Properties
  • Modules

3. Building Blocks of Angular App

• 3.1. Component
  • Create a component:
  • Register it in a module:
  • Add an element to the HTML markup
  • Generate Component Using Angular CLI
• 3.2. Module
• 3.4. Directives
• 3.5. Services
  • 3.5.1. Services and Dependency Injection
• Dependency Injection (DI)
  • 3.5.2. Generating Services Using Angular CLI
  • Data Binding
  • Metadata
• Angular App Architecture

4. Displaying Data and Handling Events

• 4.1. Property Binding
• 4.2. Attribute Binding
• 4.3. Adding Bootstrap
• 4.4. Class binding and Style Binding
• 4.5. Event Binding
• 4.6. Event Filtering
• 4.7. Template variables
• 4.8. Two way data-binding
• 4.9. Pipes

5. Building Reusable Components

• 5.1. Component API, Input and Output Properties
• 5.2. Templates and Styles
• 5.3. View Encapsulation
• 5.4. ngContent and ngContainer

6. Directives

• 6.1. Built-In Directives
  • ngIf
  • Hidden Property
  • ngSwitch Case
  • ngFor
  • ngFor and Change Detection
  • ngFor and trackBy
  • The Leading Asterisk
  • ngClass
  • ngStyle
  • Safe Traversal Operator
  • Creating Custom Directives

7. Template driven forms

• 7.1. Building a Bootstrap Form
• 7.2. Types of forms
• 7.3. Adding Validation
• 7.4. Specific validation errors
• 7.8. Styling Invalid Input Fields
• 7.9. ngForm
• 7.10. NgModelGroup
• 7.11. Control Classes and Directives
• 7.12. Disabling the Submit Button
• 7.13. Working with Check Boxes
• 7.14. Working with Drop-Down Forms
• 7.15. Working with Radio Buttons

8. Reactive forms

• 8.1. Implementing Custom Validation
• 8.2. Asynchronous Operations and Validation
• 8.3. Validating the form upon submit
• 8.4. Nested FormGroups
• 8.5. FormArray
• 8.6. FormBuilder

9. Consuming HTTP Services

    POST - CREATE

    PATCH - UPDATE

    PUT - UPDATE

    DELETE - DELETE

    GET - READ

• 9.1. Getting Data
• 9.2. Creating Data
• 9.3. Updating Data
• 9.4. Deleting Data
• 9.5. OnInit Interface
• 9.6. Separation of Concerns
• 9.7. Extracting a Service
• 9.8. Handling Errors
• 9.9. Handling Unexpected Errors
• 9.10. Throwing Application Specific Errors
• 9.11. Handling Bad Requests Errors
• 9.12. Importing Observable Operators and Factory Methods
• 9.13. Global Error Handling
• 9.14. Extracting a reusable Error Handling Method
• 9.15. Extracting a reusable Data Service
• 9.16. The Map Operator
• 9.17. Optimistic vs. Pesimistic Updates
• 9.18. Observables vs. Promises

10. Routing and Navigation

• 10. Routing and Navigation
• 10.1. Configure Routes
• 10.2. RouterOutlet
• 10.3. RouterLink
• 10.3. RouterLinkActive
• 10.4. Getting the Route Parameters
• 10.5. Routes with multiple parameters
• 10.6. Query Parameters
• 10.8. SwitchMap Operator
• 10.9. Programmatic navigation

II) Automated testing, Unit Testing, Test Driven Design

1. Automated tests

2. Test Driven Dev - Red, Green, Refactor

2.1 When to Introduce TDD : 2.2 When NOT to Introduce TDD : 2.3 Mesure Success with TDD

3. Unit and Integration Testing

• 3.0. Unit Testing Examples

  • Setup methods for testing
  • Test component that has injected a FormBuilder
  • Test a component with event emitter
  • Test a component that has an injected service

• 3.1. Integration Tests

  3.1 Angular Tests with Jest

  3.1.2. Jest is better

  3.1.3. Installation steps:

  3.1.5 SnapShot testing

  11.3.2 Unit Testing RxJs with Marble Diagrams

  3.2 Unit Testing RxJs with Marble Diagrams

  3.2.2 Marble Syntax - RxJs Empty and Never Observables

  3.2.3 Write the first marble test

  3.2 Model Observables using hot() or cold() methods in unit testing

  3.3. Unit testing by mocking Observable values

  3.4. Testing RxJS Operators

  3.5. Testing Business Code

  3.6. Handling Errors and Race Conditions

III. NgRx Implementation - REDUX Store in Angular

Understanding the REDUX PATTERN is the key for understanding ngRx Library and using it to programm in a reactive style.

• manage state using the ngRx STORE

• redux with observables = manage the state useing observables streams of data

• immutable @Inputs (modify the copies of objects, and create new objects using the reference of the initial object)

• performance benefits because object reference checks are fast (use ChangeDetectionStrategy.OnPush to compare object references, not objects)

• support for: eagerly loaded modules & lazily loaded modules

• Elaborated REDUX Implementation

• Why use REACTIVE

• Implementation

  • Step - add action constants and creators
  • Step - create and register the reducer
  • Step: composition with selectors
  • Side Effects Model for ngRx/store
  • Optimize Data Structures with Entities
  • Hooking up @ngRx-router-store
  • Extending the State Tree
  • Entity Patterns, CRUD opperations
  • Routing via Dispatch
  • State Preload and Protection via Guards
  • Observables and Change Detection

IV. Small Redux Store

V. Angular interview questions