Learning MEAN Stack by Building Real world Application

In this video, you will learn how to install angular-cli and create Angular 5 project using Angular-cli

The CLI created the first Angular component for you. This is the root component and it is named app-root. You can find it in ./src/app/app.component.ts. In this lesson, You will learn how to edit your first component in Angular Application

An Angular CLI project is the foundation for both quick experiments and enterprise solutions. In this video, I will explain the project files from Angular-cli project

Angular apps are modular and Angular has its own modularity system called NgModules. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule

An NgModule is defined as a class decorated with @NgModule. The @NgModule decorator is a function that takes a single metadata object, whose properties describe the module.

A component controls a patch of screen called a view.
You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods.

  The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.

Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest.

Angular supports two-way data binding, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides

Angular pipes let you declare display-value transformations in your template HTML. A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive decorator.

service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well

 In this lesson, we will create a new Angular service.

Components consume services; that is, you can injecta service into a component, giving the component access to that service class

To define a class as a service in Angular, use the @Injectable decorator to provide the metadata that allows Angular to inject it into a component as a dependency

You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Componentdecorator's templateUrl property.

To display a list of heroes, begin by adding an array of hero names to the component and redefine myHero to be the first name in the array

The app's code defines the data directly inside the component, which isn't best practice. In a simple demo, however, it's fine.
At the moment, the binding is to an array of strings. In real applications, most bindings are to more specialized objects.
To convert this binding to use specialized objects, turn the array of hero names into an array of Hero objects. For that you'll need a Hero class:

You met the double-curly braces of interpolation, {‌{ and }}, early in your Angular education

Write a template property binding to set a property of a view element. The binding sets the property to the value of a template expression.

You can set the value of an attribute directly with an attribute binding. This guide stresses repeatedly that setting an element property with a property binding is always preferred to setting the attribute with a string

In this video, we are going to add bootstrap4 in Angular Application

you can add and remove CSS class names from an element's class attribute with a class binding.

Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name].

You can set inline styles with a style binding.
Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix style, followed by a dot (.) and the name of a CSS style property: [style.style-property]

The bindings directives you've met so far flow data in one direction: from a component to an element.

 You can also implement event filtering in Angular. In this lesson, we will implement keyup event in Angular

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.
Use the hash symbol (#) to declare a reference variable. The #phone declares a phone variable on an <input> element

Two-way data binding combines the input and output binding into a single notation using the ngModeldirective.

Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket

You can communicate with parent and child component with using input property. It is used to send the data to the child component

You can also change  the name of Input property  by using aliases in Angular

The purpose of @Output is to trigger custom events in components and create a channel for inter component communication

 You can also send the data by emitting the event emitter. In this lesson, I will send the hero object while emitting the event emitter.

You can also change  the name of Output property by using aliases in Angular

There are three ways to apply styling on Angular component.

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.

ng-content is a way of rendering html content between opening and closing tags within template for that componen

If you don’t want to put extra div in the html content then you need ng-container

In this video, you are going to learn how to add Angular material in to Angular version 5.

Angular provides many prebuilt theme like indigo-pink.css. It depends on you whatever you want to use. I will show you how to add prebuilt theme in Angular Material

In this videos, you are going to learn how to Material Fonts in Angular Material project. Material fonts provide many built icons for buttons. I will show you how to use material icons in buttons and material menu

If you have to use any module into multiple module then you need to create a shared module. Shared Module will contain all the reusable piece of components, directives and modules

In this lesson, you are going to learn how to create a new module using Angular-cli

In this lesson, I will teach you what is lazy loading and how to implement lazy loading in angular. Lazy loading is used to load components on the demand

I will show the demo of lazy loading. You can check that is lazy loading working on your application or not

I will show you to create component using Angular-cli

You will learn how to create component in Angular using Angular-cli

I will show how to add material sidenav component in Angular Application

You will learn what is material toolbar component and how to use material toolbar component

You will learn how to design a side nav bar using Angular material toolbar component

I will teach you how to use material toolbar in Angular Application

You will learn how to add mode in the Material Sidenav navigation

I will show you how to make a material sidebar responsive

I will show how to debug the material nav bar and its responsiveness

I will show you how to create a menu icon using material menu

I will show you how to use material icons in the Angular material application. We will use material icon to create a menu icon

In lesson you will how to use Material Card component in your Angular application

In this lesson, you will learn how to refactor any component and module

In this lesson, you are going to learn how to use Material list items in Navigation

In this lesson, you are going to learn how to create routing and module in Angular

In this video, you are going to learn how to create a module in Angular and routing using Angular-cli

In this lesson, you are going to learn how create express server in nodejs application

I will show you how to create a route in express application

You will learn how to use ES6 features with Nodejs using babel plugin

I will show you how to add npm script for production and debugging

You will learn how to use ESLint with Nodejs. I am going to teach how to configure ESlint in Nodejs app

I will show you how to use both eslint and prettier with nodejs project

In this video, I will show you how to create a get endpoint route in express framework

You will learn what is middleware in express and how to create middleware in express

I will show you how to convert your nodejs app into MVC pattern.

You will learn how to connect Nodejs app to mongoose

You will learn how to create new model in mongoose ODM

I will show you how to debug the Nodejs app in Chrome

You will learn how to debug the Nodejs app in VS Code

You will learn how to create error handler middleware in Express

I will show you how to handle Errors using error handler middleware

You will learn how to catch errors using global level middleware

I will show you how to implement Logging using morgan package in nodejs

I will show you how to parse the request body in express using json body-parser

I will show you how to create new record in MongoDB using mongoose model

I will show you how to add validations through Joi. Joi is an external package to handle validations

I will show you how to find all the records from the Mongodb collection

You will learn how to use http status codes in express api

I will show you how to find record by id

I will show you how to delete record from MongoDB on the based on ID

You will learn how to update record in Nodejs and MongoDB collection

In  thi lesson, I will teach you how to setup swagger project with Nodejs

You will learn how to add host, port, or project meta data in swagger

In this lesson, I will teach you how to add JSON Mime types in swagger file

I will show you how to add model definition in swagger project

I will show you how to add documentation for HTTP post endpoint in swagger

I will teach you how to add documentation for get endpoint

You will learn how to add documentation for FindOne endpoint

You will learn how to add documentation for DELETE Endpoint in Swagger

You will learn how to add documentation for Update path in Swagger and Nodejs

I will teach you to debug the nodejs project api from swagger doc