Angular is a platform and framework developed by Google Team for developing client and mobile applications in HTML, css and TypeScript. Angular framework itself is written in TypeScript. A superset of javascript that provides other OOPs based functionalities that pure javascript doesn’t.

What Are NgModules?

NgModules are the angular modules. Angular app mainly comprises of different modules. These are the main building block of the angular app.
The modules are just like the wrappers to the components along with all the information about it’s child components that will be used while compiling the app. Every app will at least have one root module called AppModule. it’s used bootstrap the application In angular app there are 2 different types of NgModule.

• Root NgModule
• Feature NgModule

What are Angular Components?

The components are the smallest part of the application. Most of the time you will be dealing with the Components. Components are just a combination of the following 3 different things.

• Template – The view part for your portion of app. Beside simple html it can include angular directives. Directives are special keywords that are used to instruct angular to perform some operations like implementing conditions (show/hide a portion of template), implementing loop etc.
• Style – Css styling for your above template. Remember the by default one components styling does not affect another component’s styling. That means you can keep the classes with same name or reference the same name tag in different components with different style. However you can also write a global css that will apply to whole app.
• Controller – A Typscript class that will be controlling your component’s template view and data. It will be responsible for handling all the dynamic behavior of your component like fetching/submitting data from/to your back-end APIs via services, updating your component’s states etc. You will be writing all the computational logic for your component in controller.

These all 3 can be contained in same file but the best practice is to keep in a separate file.

Services – It can either be the part of the component or can be created on global scope. Service is the simple typescript class value or a function that serves a specific purpose. It lets you deal with the data by consuming back-end API’s internally, logging purposes and for communicating between different components etc. These are injected to the component via dependency injection mechanism.

Dependency Injection – This is mechanism that angular uses to mention the dependency in a component. Dependency Can be any thing a service, a value or even a function. This helps to keep the component class lean and readable by separating the common code to separate services and function files that can be reused everywhere in the app.