Angular Folder Structure in Visual Studio 2019

 

In visual studio Angular Front End contains under the ClientApp folder.

   e2e folder

   (E2E)  means end to end testing and also known as integration testing provides a

   automatic simulation  by which we can make sure that our application works correctly

   and components are communicating with each other accordingly and producing 

   the desired functionality.

In Angular protractor is a framework which provides power full testing tools and technologies protractor.conf.js file provide configuration setting for the protractor framework.

src folder

This folder contains all the main code files which we will create and work around in our Angular project.  

app folder 

When we create Angular project, the default app module will be automatically created. 

Every Angular application must contains at least one module and one component. 

  

Inside app folder we can see that there are few folders includes counter, fetch-data, 

home,  nav-menu which are components of our app. Inside components we define our application logic and data.

As we can see that each component has its own HTML and TypeScript file and also counter component has specification file which provides unit testing for the component. When we create component in Angular .css file also created in which we can define style for the component it is an optional choice as we can see it in our nav-menu component.

app.component.html this file contains the HTML code it is a template file used to bind the data for Angular.

app.component.ts this is a typescript file provide logic to our component.

app.module.ts this is also a typescript file it contains all the dependencies for our  app we will import needed module for our app here and also declare component to be use in the app.

Some other important files in the Angular Project Folder.

          package.json

 It is the npm configuration file. It contains information of packages and  dependencies installed in our web application.

         package-lock.json

This file automatically generate the information when npm package manager runs, this file store the npm operation.

angular.json

 This file contains information related to workspace configuration and project specific configuration and provides default setting for the build and development tools provided by Angular CLI.

.gitignore

 this file stores the information related to Git operation and tells the Git which files to ignore.

.editorconfig

 This files maintains the consistency related to code editor operation.

Assets folder

This folder contains those files which are not modify during compilation such as images.

Environment folder

contains files which provide default environment for the configuration.

Browser list

In this file you can define your target web browser.

favicon.ico

It is a small graphic image file which represent your website brand in the web browsers.

Index.html

when some one visits your website this files serves first.

main.ts

 It is the main entry point and it is .ts file it will start the JIT compiler and compiles your application.

polyfills.ts

This file contains polyfill scripts to support the web browsers.

test.ts

It is the main unit test file in your project.

styles.css

It is a Global CSS file which provide style support for  your application.

tsconfig.json

This file specifies the configuration options for the TypeScript compiler.




tslint.json


This file provide configuration information for the TSLint for the current project.

Here is a YouTube video Link of my Angular Dot Net Core Folder Structure tutorial (Urdu/Hindi language)

Written By

Syed Sohail Ahmed Quadri

YouTube Channel

Right Way Learning

Introduction To Full Stack Dot Net Development

 WHAT IS MEAN BY FULL STACK DEVELOPER

A software engineer who works both on the Front End like (Angular, HTML, JavaScript, CSS, Bootstrap, jQuery) and Back End like (ASP.NET Core, PHP, Python, Java, Database).

It means that it is necessary for a full stack developer to work both on Client Side as well as Server Side. The main reason behind is that he/she has to work on both ends (front end/back end) when developing an application.

Full stack developer has an interest in all software technologies.

WHY WE NEED FULL STACK DEVELOPER

 Here are some prominent reasons why you should hire a full stack development professional.

full stack developer helps you to keep every part of the system running smoothly.

full stack developer can provide helps to everyone in the team and greatly reduce the time and technical cost of team communication.

If one person can plays different roles, it saves your company’s personnel, infrastructure and operational  cost.

Learning Approach

In this series of articles we will discuss the Angular + Dot Net Core full stack learning approach. For the design of database we will use code first approach with entity framework core.

Learning Angular and Dot net core together means that you can become full stack dot net developer. So by learning these two technologies you can design front end in Angular and back end in Dot Net Core and you can produce complete web application of your own.

Working Diagram

What is ASP.NET Core

It is developed by Microsoft. ASP.NET Core is a cross platform Framework. Cross platform means it can run on windows, Linux and Mac OS. ASP.NET Core is also an open source light weight and high performance. It is a modern web framework by using that you can develop cloud based and also internet connected applications.

What is Angular

Angular is a framework and development platform for building efficient and sophisticated single-page web applications. Angular is typescript based platform, it is also open source and developed by Google.

Advantage of Angular

Angular is just a single framework you need to learn whether you are interested in developing for mobile application or for a desktop web application.

What is Single page Application

Angular is a single page application development framework (SPA) that means it dynamically rewrite the current page with new data from the web server instead of loading entirely new page which is a traditional approach.

Here is a YouTube video Link of my Full Stack Dot Net Development tutorial (Urdu/Hindi language)

Written By

Syed Sohail Ahmed Quadri

YouTube Channel

Right Way Learning