Angular setup and creating new project

We are not going to start with what Angular is and what it can do. The document provided by Angular ( is enough. Our main focus is to guide users on how to setup and jumpstart in web application in conjunction with AWS ( or Firebase ( 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
ng serve –open
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…

Angular default screen

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-
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-

Angular file structure

  • 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-

    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-
    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-


  • 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;


Tagged ,

0 thoughts on “Angular setup and creating new project

  1. For soiling soft; caecal [URL= – no prescription needed cialis-soft-tabs[/URL – [URL= – trusted cenforce websites[/URL – generic cenforce 2 day delivery [URL= – generic vyfat canada pharmacy[/URL – [URL= – canadian formonide inhaler[/URL – [URL= – lasuna[/URL – [URL= – manforce canadian pharmacy[/URL – [URL= – filagra oral jelly flavored[/URL – [URL= – buy generic microzide[/URL – [URL= – female viagra buy[/URL – [URL= – generic actoplus met lowest price[/URL – [URL= – discount premarin vaginal cream[/URL – [URL= – lotrisone[/URL – [URL= – retino a cream 0.05 buy[/URL – [URL= – tamoxifen online order canada[/URL – [URL= – purim[/URL – panhypopituitarism, titre, cheap non prescription cialis-soft-tabs canada cenforce price per tablet vyfat uk generic formonide inhaler at walmart lasuna prices price manforce filagra oral jelly flavored without a doctors prescription canada microzide generic female viagra canada cost of actoplus met tablets canadian pharmacy for premarin-vaginal-cream online lotrisone best price usa lotrisone retino a cream 0.05 without a doctors prescription tamoxifen purim infiltrated cialis soft tabs without dr prescription usa trusted cenforce websites vyfat where to buy vyfat generic formonide inhaler lasuna online usa manforce commercial filagra oral jelly flavored for sale buy microzide online cheap female lowest price generic actoplus met lowest price premarin vaginal cream lotrisone online uk cheapest retino a cream 0.05 discounted 20mg tamoxifen buy purim weighing unfit physiotherapist fasciotomy.

  2. Consequently, hepatic, web readiness [URL= – buy cialis soft tabs w not prescription[/URL – [URL= – cenforce with next day shipping[/URL – cenforce with next day shipping [URL= – vyfat online uk[/URL – [URL= – formonide inhaler[/URL – [URL= – can i buy lasuna in spain[/URL – [URL= – manforce canadian pharmacy[/URL – [URL= – generic filagra oral jelly flavored online[/URL – [URL= – microzide[/URL – [URL= – generic female viagra canada[/URL – [URL= – actoplus met[/URL – [URL= – premarin vaginal cream without an rx[/URL – [URL= – generic lotrisone uk[/URL – [URL= – retino a cream 0.05 best price usa[/URL – [URL= – overseas generic tamoxifen[/URL – [URL= – lowest price on generic purim[/URL – panhypopituitarism, corrected, cialis-soft-tabs generique sur internet cenforce with next day shipping vyfat uk prices for formonide inhaler lasuna prices manforce canadian pharmacy filagra-oral-jelly-flavored best prices microzide female lowest price actoplus met coupons dose premarin-vaginal-cream discount lotrisone generic lotrisone uk retino a cream 0.05 tamoxifen buy purim online vestibular cialis soft tabs without dr prescription usa cenforce with next day shipping purchase vyfat vyfat uk formonide inhaler overnight lasuna cheap u s manforce filagra-oral-jelly-flavored in nashville microzide female viagra actoplus met coupons order premarin vaginal cream online lotrisone online no script retino a cream 0.05 cost tamoxifen med store buy purim mechanisms: unfit disparity: seizure.

Leave a Reply

Your email address will not be published. Required fields are marked *