Angular code structure & How to use Typescript in Angular Project?

In last article we have discussed about how to create first project of Angular.
In this article  I explained how to start coding in angular.  First we need to open Visual Studio Code for coding.  I already explained how to install it in my first article.  To open Project in “Visual Studio Code” need to open first command prompt.  After open command prompt need set directory which you have installed angular project.
After that just write “code .” To open that project in “Visual Studio Code” Below video explain how to open the project.

After opening the project,the code used here looks like as below video.

In above video we can able to see the folder structure of the angular. Mainly 3 folders of our project.

  • src (Source folder)
  • e2e (End to end)
  • node_modules

We need to work in “src” folder. “SRC” folder structure is mainly based on contains followed by folders “app”,”assets” & “environments”. In assets folders, we need to add our project images , CSS and external files. In App folder we need to code in it. When ever the project start, it calls first index.html file. it call as “<app-root></app-root>” Component. We need to codes in the angular and also need to know about TypeScript.

Typescript is a language which is using for large scale applications in JavaScript. In TypeScript you can define data-types,Classes and Modules in Java-script. After doing coding in Typescript it will compile with readable javascript that compatible to run in browser. We have to created projects by using CLI that will be helping for in-build the package.json. You can find “package.json” file ion root in your project.

You can see “.angular.cli.json” file to index page & main file start from the “main.ts”

When the projects are running,  it calls index.html and then it loads in “main.ts” file in that file setting browser platform & module to load. we can find following lines in main.ts “ import { AppModule } from ‘./app/app.module’;

In our project, the main module file is “app.module“. So, when ever we are trying to create any components,services etc. We need to import components that used in our applications. Typescripts basic rules for creating components. You need to import other components which you need to use in your class & then we Export our class.  So, we can be using that class  any other components.

In my next article, I will discuss about “app.module” file & creating first component using angular CLI.

Spread the love
  • 35
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •