Angular Setup With App Module

Blog has all the details required to setup for angular. Also you would knowing about various terms used in angular.

Introduction

 

This blog contains information about tools, steps and commands needed for Angular installations.

 

Also, you will learn about Node, NPM and CLI terms with respect to Angular development.

 

Tools to be used

 

For Angular development one can use VS code, Visual Studio and any other tools.

 

Angular requires Node.js to be installed on your machine. NPM (Node package manager) comes along with installation of node by default.

 

Various commands to be used in Angular

• To check current Node version installed on your machine: node -v
• To check all available NPM versions : npm view npm versions
• To upgrade NPM to latest version: Npm install -g npm@latest
• To Check NPM version : npm -v
• To Check CLI version : ng –version
• To install CLI globally : Npm install -g@angular/cli@latest

Why do we Require Node in Angular?

 

It is not required or mandatory to use node.js for developing of Angular applications. Nodejs along with NPM helps you manage your project and makes thing easier for you. Insead of node, we can use any other language like C# for backend things.

 

Use of NPM

 

It allows you to manage your project dependencies. We don’t have to worry about adding/removing/updating a dependency and updating the package.json.

 

Angular CLI

 

NPM provides us with CLI (command line interface) which helps to create Angular applications. It can be used to create components, services, pipes, directives and more.

 

Root Module in angular

• An Angular application starts only by bootstraps/launching the root module class. So, App.Module.ts/App Module/Root module is a must for Angular applications.
• An Angular application must have at least one root module.
• This root class has all the details such as below: Any other module used in application such as routing, browsing etc. Declaration of AppComponent or any other user defined component used in the application. Bootstrap component detail which is used to launch the application. It tells angular how its various components fit together.
• Here in the below code snippet, the 'import' statements gives you access of all classes/modules whichares exported by other assemblies, so that you can reference them within your app module e.g; @angular/core , @angular/platform-browser.
• The 'imports' within @NgModule tells Angular to use any specific angular module to be used; e.g BrowserModule, AppRoutingModule.
• How to co-relate 'import' and 'imports' using C# : 'import' is like System.IO' which is the main assembly whereas 'imports' mean File, FileStream, Path etc classes inside it. 'imports' means you are importing few feature/classes from main assembly.

import { NgModule} from ‘@angular/core’;
import { BrowserModule} from ‘@angular/platform-browser;
import { AppComponent} from ‘./app.component;
import { AppRoutingModule} from ‘./app-routing.module;

@NgModule ({
imports:         [BrowserModule, AppRoutingModule],
declarations: [AppComponent],
bootstarp:      [AppComponent]
})
export class AppModule { }

Conclusion

 

Angular setup is very easy and one should also be aware of Typescript which works as code behind for HTML.

 

Anybody who is not used to working with Javascript and is from dot net or java background can connect with Typescript very easily.