Angular 5

Angular5 CRUD

Basics:

• index.html is the file that is served by the server and gets rendered in the browser
• index.html links the styles and other java script files which are required for running the app
• AppComponent is the root component which gets loaded first
• Typically, all of the other custom components are nested inside AppComponent
• AppComponent is inserted in the body of index.html using custom "app-root" element
• selector tag is used to load a component's instance 

Execution flow of Angular2:
 Loading main.ts --> app.module.ts--> bootstraps app.component.ts.
app.component.ts is the first page that is loaded when the index.html loads.
app.component will replace the selector tag <app-root> that is present in the index.html

Directives:
There are 3 types of directives. Component, structural, attribute directives.
Component directives: 
        For writing Business logic. component has metadata like selector, templateurl, styleurl:
Structural directives:
        For manipulating DOM elements. Built-in directives are: *ngFor, *ngIf, ngSwitch.
Attribute directives:
        For changing color, bg-color, styles

Data Binding:
Interpolation: {{}}
Property Binding [xx]="hello"
Event Binding {{hello()}}
Two way binding : [ngModel]="xyz"

Why Node JS?

It is not mandatory to use node.js for developing angular application. You can very well go ahead without node.js for developing angular application but it would not be wise to do so. Let me explain you some of the reasons how node.js makes angular app development process easier for us:

• Node allows you to spin up a lightweight web server to host your application locally in your system.
• NPM (Node Package Manager) comes with node.js by default. NPM allows you to manage your dependencies. So, you don’t have to worry for operations like adding a dependency, removing some, updating your package.json.
• Third and the most important, npm gives you angular cli or ng cli(angular command line interface) . Angular CLI is a great tool for scaffolding your application. So, you don’t need to write boilerplates manually.
• Angular recommends the use of TypeScript. Now, your browser does not understand TypeScript. It needs to be transpiled to JavaScript. Also, you need to bundle your js files and stylesheets together with the html doc so as to get the web app CLI which is ready to be hosted. Angular CLI helps you to do all these behind the scene. By default, ng cli uses webpack for bundling your application and is very helpful for beginners who have just jumped into web development with angular as it abstracts such complexities.

I guess, by now, you would have understand the reason for using node for angular app development. If you are interested in learning more about angular, I would recommend you to go ahead with the following playlist. It will help you learn all of the angular concept from scratch with lots of demos:

Angular 5
Angular2 interview questions
Angular4 interview questions

.map and subscribe
In the service we use the observable operater map to map the response from it’s raw form into a javascript object using res.json(). It’s the same exact concept as mapping with Arrays, if you’re familiar with that.
Then in the component we call the subscribe() method of the returned Observable. The word subscribe implies that something is recurring. In real life you subscribe to shit like Spotify, and expect to get something every month. And that is true of Observables, when you call subscribe every time there is new data the subscribe callback function will run again. However, in the case of HTTP when there is only one data payload you can count on subscribe to only run once.
Finally, the HTTP request doesn’t happen until subscribe() is called. So in the example above the example, the HTTP call is not made until ngOnInit()is called.

3 Common Mistakes I see people use in Rx and the Observable Pattern