Angular Introduction

Start Angular Application: There are two types of angular , Angular Js & Angular CLI,
We are going to dive in to the Angular CLI:

Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.

Before you begin, make sure your development environment includes Node.js® and an npm package manager.

1 - Node.js : Angular requires Node.js version 8.x or 10.x.
            To check your node js version use node -v
2 -  npm package manager : Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages

Install The latest Version of the Node as well as npm:

sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -

sudo apt-get install nodejs

Step 1: Install the Angular CLI: Install the Angular CLI globally.
npm install -g @angular/cli
Step 2: Create a workspace and initial application:
ng new my-app
Step 3 : Serve the Application :
cd my-app ng serve --open
The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Run the Commans with sudo to avoid the permission issue.

1. Angular has moduler approach, Every angular Application must have atleast one module, and modules have the own components , services, css etc, one frontend page must have atleast one component, it may have multiple components like headers,navigationos,footers etc,
2. Each component must have the html and a class which have all the login inside here, It has all the view page logic ,to display with in the view.
3. Modules also have the services class, which have the business logic like models in MVC,
4. Package.json : It has whole application dependency, and the commands to start the Application, 
5. src/main.ts : It has the entry point of the application like, index.php
6. How It works: When we hit the ng serve command it comes to the main.ts file and load the modules which is listed here..

---------------------------------------- app.module.ts -------------------------------------------------------
@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FrontModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/**

* NgModule Declarion :

* declaration : Here we declare the only components|pipe|directives, belongs to compiler

* imports : Here we declare the only modules

* providers : declare service here, belongs to injector

* bootstrap : define booting process i.e which would be the call first
*/
NOTE: If we declare a component in one ts file then we can't declare it
any othe ts file it will through the error,

---------------------------------------- end app.module.ts --------------------------------------------------
Commands:
ng generate module front
ng generate component front/latest_news
ng generate class front/topmenu/topmenu

ng generate service topmenu

When we create module and add it in imports array within the app.module.ts, Now you can create as many components as you want and you have to declare it only on our own modules declarations array,

If you would like to include the modules component in main app.component.html , then you have to export the component in  our module file in our case, like we want to include the latest-news & top menus component in front.module.ts

front.module.ts:

@NgModule({

declarations: [LatestNewsComponent, TopmenuComponent],

imports: [CommonModule,HttpClientModule],

exports:[LatestNewsComponent,TopmenuComponent],

})

app.component.html:

<h2><app-topmenu></app-topmenu></h2>

<h2><app-latest-news></app-latest-news></h2>