Angular 5/4 installation and Basic Flow Structure

Angular is one of the most popular javascript frameworks for creating web apps. Maintained by Google, you can be assured that this powerhouse of a framework is built with speed and purpose.

In this 100% free Angular 4 course, I'm going to make the assumption that you have never touched Angular in your life. Experience with AngularJS (1.0) or Angular 2 is not mandatory.

There are a few different ways to get started with an Angular 4 project.

1.You can install it manually by hand

2.You can use the Angular-CLI (Command Line Interface) to install it for you

3.You can upgrade an Angular 2 project to an Angular 4/5 project

4.You can clone an Angular 4/5 project at GitHub.

Before we can begin, we have some dependencies. they are 

• Node.js with NPM (Node Package Manager)
• Angular-CLI (Command Line Interface)
  
  Visit the Node.js  and download stable version. Run the .exe file on your OS.

Next we need to install Angular-CLI using below command line. Here i am using Angular-CLI to install angular project(point 2).

>npm install -g @angular/cli
After it's installed, close your console / command line and reload it. You can now run the node -v command and it will provide you with the current version number.

Now create your new project in angular using below command.


> ng new my-new-project-name (or) ng new my-test --routing

Generate Component :

ng generate component my-comp --module app-routing.module.ts

It will generate routing file. Finally run ng serve to start our server.

Next section i will explain folder structure and angular application flow.

e2e -- folder is used for testing purpose.
node_modules -- Folder is having all node pre-defined library file.
src -- this is our application folder we have to write our components and modules.

.angular-cli.json 

Here we have our project name and from where we call node_modules.

we can include styles and script from here.

package.json -- file having all dependency packages with version.

src > index.html file will run.
in this we have a selector  in body tag  <app-root></app-root>

src > main.ts file 
In this file default it will hit into AppModule

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.log(err));

src > app > app.module.ts file 

here we will connect with AppComponent
 bootstrap: [AppComponent]

src > app > app.AppComponent.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app';

}

next app.component.html file to display our template.

here app.component.css inline style can written with in component.

Here simple logic is first index.html file will loads in this we define a selector in tags
like  <app-root></app-root>  and mention in which component have to run for our template.