Hi Techies,
Thank you for visiting my pages, please write your queries and comments in the comments section at the end of this post. Please share this pages to other audiences of your colleagues, friends.
Tutorial 1 is the basic introduction part for angular application. Today we are going to learn few more basic concepts for starting the angular application development. As i said simple angular, lets start with simple concepts. But this knowledge is very important for facing your interviews.
I am writing this post as a notebook, not like a tutorial.All the points i covered here, are the most important topics. You can refer this notes every day at least twice a day, so that your mind will remember them better.
We start with Application Structure and it's folders.
1) node_modules folder
This folder is used for storing all the packages/references used in the application. If you install a new package using CLI (command line interface) , Those packages are added under this
node_modules folder.
Example:
cli cmd-/
npm install --save bootstrap
npm install --save Jquery
These bootstrap & Jquery packages will be added under
node_modules folder and used as reference for this application.
2) src folder
This is the main folder for used in the application design. It internally contains below folders and files.
a) app folder
b) assets folder
c) index.html file
d) main.ts file
e) styles.css file
d) test.ts file
We will discuss about these folder and files in detail in below sections.
a) app folder
app folder is the application folder. All the components, modules, service that we create during the development will be added under this app folder only. The main important files under this app folder are given below
1) app.module.ts
2) app.component.ts
3) app.component.html
4) app.component.css
These files are the heart of angular application. These files contain the logic for running the application.We will discuss about these file in detail at the end of this post.As a developer most of the time, i.e 80% , we interact with these above four files only.
b) asset folder
This folder contains the images, icons, data files and XML files used in the application.
c) index.html file
This is the most important file. In tutorial 1, we said angular is used to design complex single page application(SPA), this is the file with complex java-script and html code.
**Angular compiles all the components, modules , services written in typescript and Html templates into a simple JavaScript, html code and stores in the index.html file.
This process of converting the typescript to java-script is called "
Transpiling".
This page contains the pre-compiled code for all the component used in the application. So that, when a user request for a component or navigate from one page to other page from menu, the page will be rendered(loads) faster with out any delay.
Only the content inside the document will be updated. It will not refresh the entire browser page. Url path in the address bar will be changed. Hence the angular applications performs better compared to other asp.net, MVC applications.
Angular Application - Folder structure
d) main.ts file
This is the main entry point of the angular application. This file compiles the App Module and renders the requested components in the browser.
e) Styles.css
This is a style sheet file which contains the styles for html dom elements.Styles specified in this file are applied globally in the application.
Let's discuss about the
app folder files here
1) app.module.ts
This Typescript file is the root module class for the application. we provide or group all the components, modules, service references in
@NgModule () decorator.
@NgModules takes a metadata object that tells angular how to compile and launch the application.
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
ProductListComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
DBDataService
],
bootstrap: [AppComponent]
})
export class AppModule { }
2) app.component.ts
This Typescript file contains @Component() decorator. This file is the root component class. This file contains the logic or methods to control the application UI.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
3) app.component.html
This is the root Html file used in the
index.html.We will add the individual component template directives in this file.
<!--Header component tags-->
<app-header></app-header>
<!--other application component tags -
You can specify any number of components-->
<app-product-list></app-product-list>
<router-outlet></router-outlet>
<!--End of other application component tags-->
<!--Footer component tags-->
<app-footer></app-footer>
4) app.component.css
This is the root file for styling the
index.html file. it contains styles for elements in the document.
Let's discuss in depth about these files in the next post. Along with this you can go through the official angular website for more information.Please write your queries and comments in the comment section below.
Thank you..
