We are not going to start with what Angular is and what it can do. The document provided by Angular (https://angular.io) is enough. Our main focus is to guide users on how to setup and jumpstart in web application in conjunction with AWS (https://aws.amazon.com) or Firebase (https://firebase.google.com) as back-end.

The installation:

For getting started and creating an Angular Web project, the things you need to install are-

• Node.js & NPM:
  There is plenty of information on how to install Node and NPM in their website. Infact NPM going to be installed automatically. After the installation you can check for the version using  the below commands in terminal-
  node -v
  npm -v

• Angular CLI:
  The next thing you need to install is Angular command line interface. For that, type the command in terminal-
  npm install -g @angular/cli

Your first Angular project:

For creating a new project in Angular, you need to type the following command-
ng new <project name>

Optionally, you can type the below command to transform your project by applying the     schematics in the specified package-
ng add

Next you need to move into the project directory in terminal and serve the app by-
ng serve
Or
ng serve –open
Or
ng serve -o

Now once the     compilation process is complete. You can run your project in your browser by typing the localhost address on the browser address bar. By default it’s run on http://localhost:4200 and gets opened automatically with the ng serve –open command. Angular welcomes you with the default Web App created automatically. Now you are ready to go…

Let’s start the coding:

You can use any code editor of your kind but the most recommended one are Visual Studio Code, WebStorm, IntelliJ Idea etc. You can get a complete list of the resources here- https://angular.io/resources
Now Angular has already created the basic elements for you. The project folder contains several files and folders. Among them ‘src’ is the source code folder of your project. Here is a glimpse of the ‘src’ folder and it’s contents-

• The app folder contains the app component file. It’s corresponding template file, css and component.spec file for testing.
• The assets folder can be used to store various images, icons, css and JavaScript files.  The application going to use these assets during runtime.
• The environment folder contains the environments files. These files contains the environment variables belonging to the project. These environment variables can be different back-end connection parameters, API URL, configuration etc.
• The index.html is the actual html page for the project, which contains the various links and headers. This is the entry point of your application.

Meet your companions:

We use the following building blocks while development in angular.

• Module: 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. It can import functionality that is exported from other NgModules and export selected functionality for use by other NgModules. Like below-

  @NgModule({
  imports: [ BrowserModule ],
  providers: [ Logger ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ],
  bootstrap: [ AppComponent ]
  })

• Component: A component can be added to a project with the command-
  ng g component <component name>A component contains the four files related with it:

  1. The typescript or .ts file which contains the component logic and uses OOP approach. It contains the decorator @component and which contains the selector, links to its corresponding template and css files. Like-
  @Component({
  selector: ‘app-dashboard’,
  templateUrl: ‘./dashboard.component.html’,
  styleUrls: [‘./dashboard.component.css’]
  })

  2. The template file or the .html file.
  3. The style sheet or the .css file related to the component template.
  4. The .spec.ts file for unit testing purpose.

• Service: A service can be used as a tool to define various methods, that can be used by one or more components. A service uses the decorator @Injectable and hence any component needs to inject the service into there constructors in order to use it. Like-

  @Injectable()

• Pipe: A pipe takes in data as input and transforms it to a desired output. There are several built-in pipes as well as you can create your own pipes. Like- date pipe, currency pipe etc. One example is below-

  @Pipe({name: ’round’})
  export class RoundPipe {
  transform (input:number) {
  return Math.round(input*100)/100;
  }
  }