..... Build my own Web-based Video Store using Angular in Frontend and NodeJs in Backend.

This README file will basically document what technologies I learnt along the way in creating by very own online video store from scratch. I have to warn you though; this document will be technical and general familiarity with Web development is expected. However, non-technical readers will find it informative, as I have tried my best to make it understandable.

I will first start with implementing the Backend using NodeJs. In parallel, I will be work on the Frontend using Angular.

Useful modules build within NodeJS.

1. File System
2. HTTP - create web services
3. OS - work with Operating System
4. Path - gives us utilities function to work with Path
5. Process - gives information about current process
6. Query Strings - useful in building HTTP services
7. Stream - Allows us to work with streams of data

In all endpoints we have implemented so far, we returned .json Objects in res. Sometimes however you need to return HTML or markup... to the client... thats where we use Templating engine...

Various templating engines for express are:

1. Pug (previously called Jade),
2. Mustache,
3. EJS

Each of these have different syntax for generating dynamic HTML and returning it to the Client...

I will work on Pug in this project...

lets see how to use 'pug' to generate a dynamic HTML and return it to Client...

npm i pug

we have to set the view engine in our index.js file... see the section for 'View Engine' in 'index.js'... with pug we can create 'index.pug' and write dynamic HTML...

You really don't need Template engine for creating REST services for Backend application... But for Frontend you do need.

Details later... here we will touch the basics... MongoDB and and mongoose(build on top of MongoDB).

npm install mongodb

Details will be done later...

Outside the scope of express... since express is a minimal, lightweight framework which is opinionated... Later we will go in details about Authentication and Authorization...

for every API endpoint we are going to have a separate module...

Asynchronous programming is a non-blocking way of program execution. The program doesnot wait for slow processes and therefore moves on to another line to execute it...

We create a function, in index.js file, in async-demo folder...

Ok there are 3 Design Patterns to deal with Asynchronous code:

1. Callbacks
2. Promises
3. Async/await - basically a syntactical sugar over promises.

Callback is a function that we will call when the result of an Asynchronous operation is ready.

Callback Hell -> to resolve this issue we replace all anonymous functions into "Named functions"... this way we can flatten the coding structure...

But there is a better way of dealing with asynchronous code... that's where Promises come in place...

Extremely powerful when dealing with Asynchronous code. A "Promise" is an Object that holds the eventual result of an Asynchronous operation. So basically when an async operation completes it could either result in a value or an error. A 'Promise' basically promises you that it will return the result of asynchronous operation. Promise can be in three states...

1. Pending: pending state to fulfilled or Rejected state...

The goal is to convert any callback to promise... lets see furthur...

• Now lets work on Consuming Promises that we have changed... from callbacks to promises.

• Lets now create a 'promise-api.js' file and make it such that it always passes tests, use (resolve); can be used for unit tests...

• How about running parallel promises; we can run api calls from several sources... How about inserting a 'reject' function... to see how it behaves...

Introduced with ES6/7. Simplifies callback and promises features...

1. Type Assertions

• Used for activating IntelliSense in VS code.

• Alternative way, rarely used...

2. Interfaces

• build custom properties.

If we look back at history AngularJS(1), was launched in 2010 by Google, soon it gained popularity and Google developers started adding new features... Angular1 was NOT designed with today's applications in mind... Therefore Google Engineers came up with completely overhauled, improved version -> Angular2.

Angular(2+) is a Javascript framework written in Typescript(Ts), used for Frontend Web Development.

Getting started and Initial steps:

1. npm i @angular/cli --> this downloads the 'angular cli' on your system.
2. ng new hello-world --> this command asks 'angular cli' to install all necessary packages for a normal project.
3. ng serve --> this will run the project. Output can be accessed through browser.
4. npm install typescript --> install typescript.
5. tsc -v --> check typescript version.
6. tsc main.ts --> compiles the TS code (main.ts) to JS code.

Webpack has a feature called Hot Module Replacement (HMR) which automatically reloads the apps. This helps users save time on having to refresh App every time after saving work.

Some useful commands:

1. tsc main.ts | node main.js --> run both typescript and node together.
2. ng g c course --> use angular cli to generate new component; g -> generate, c -> component.
3. `` -->

1. Components --> it encapsulates the 'Data', 'HTML Template', and 'Logic' for a VIEW. Basicallly the area of screen the user views. It furthur be divived into Modules where every Angular app has an App Module. This basically sorts all different Components into specified Module. If the App is too big, there will be several Modules. Creating a Component: a. Create a component. b. Register it in a module. c. Add an element in an HTML markup.

How to create a Component to display a list of courses? --> Angular convention suggests to create file in src->app->courses.component.ts

2. Templates -->

3. Directives --> We use Angular built-in directives to manipulate the DOM. We use directives to Add, Remove, Change ID or CLASS, or Change Style of an existing DOM element.