How to setup and running Angular project with Angular CLI

How to setup and running Angular project with Angular CLI

In this post I would like to give a quick introduction about how to set up and running an Angular project with Angular CLI

*Angular *is a front-end framework which is used to create web applications. It uses typescript by default for creating logics and methods for a class but the browser doesn’t know typescript. Here webpack comes in picture, webpack is used to compile these typescript files to javascript. In addition, there are so many configuration files you will need to run an angular project in your computer.

*Angular CLI *is a tool that does all these things for you in some simple commands. Angular CLI uses webpack in behind to do all this process.

*Note: * Please make sure you have installed node and npm in your system. You can check your node version and npm version by using the following command:

node --version
npm --version

Steps to Create your first application using angular CLI:

  • Step-1: Install angular cli
npm install - g @angular/cl

  • Step-2: Create new project by this command

Choose yes for routing option and, CSS or SCSS.

ng new myNewApp

  • Step-3: Go to your project directory
cd myNewApp

  • Step-4: Run server and see your application in action
ng serve -o --poll=2000

Introduction to directory structure:

  • e2e It contains the code related to automated testing purpose. For example, if on a certain page you are calling a REST API then what should be the return status code, whether it is acceptable or not etc.
  • node_modules It saves all the dev dependencies (used only at development time) and dependencies (used for development as well as needed in production time), any new dependency when added to project it is automatically saved to this folder.
  • src This directory contains all of our work related to project i.e. creating components, creating services, adding CSS to the respective page, etc.
  • package.json This file stores the information about the libraries added and used in the project with their specified version installed. Whenever a new library is added to the project it’s name and version is added to the dependencies in package.json.

Other files: As a beginner you don’t need this files at this time, don’t bother about that. These all are used for editor configurations and information needed at compile time. The builtin webpack in angular CLI manages all for you.

Inside src folder:

  • index.html This is the entry point for the application,** app-root** tag is the entry point of the application on this single page application, on this page angular will add or remove the content from the DOM or will add new content to the DOM. Base href=”/” is important for routing purposes.

  • style.scss This file is the global stylesheet you can add that CSS classes or selectors which are common to many components, for example, you can import custom fonts, import bootstrap.css, etc.
  • assets It contains the js images, fonts, icons and many other files for your project.

Inside app folder:

  • app.module.ts An angular project is composite of so many other modules in order to create an application you have to create a root module for your application in the hierarchy. This app.module.ts file is that. If you want to add more modules at the root level, you can add.
  • declarations** It is the reference of the array to store its components. App component is the default component that is generated when a project is created. You have to add all your component’s reference to this array to make them available in the project.imports If you want to add any module whether angular or you have to add it to imports array to make them available in the whole project.providers If you will create any service for your application then you will inject it into your project through this provider array. Service injected to a module is available to it and it’s child module in the project hierarchy.bootstrap This has reference to the default component created, i.e., AppComponent app.component.html ** Edit this file to make changes to the page. You can edit this file as an HTML file. Work directly with div or any other tag used inside body tags, these are components and do not add **html head body tags.

  • app.component.spec.ts These are automatically generated files which contain unit tests for source component.
  • app.component.ts You can do the processing of the HTML structure in the .ts file. The processing will include activities such as connecting to the database, interacting with other components, routing, services, etc.
  • app.component.scss Here you can add CSS for your component. You can write scss which further compiled to CSS by a transpiler.

More commands that you will need while working on the project:

ng generate component component_name
ng generate service service_name
ng generate directive directive_name

angular web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.