AngularJS14 Project Structure

Understand Project Structure

First Open up the project, then you will the following files.

tsconfig.json -- which contains the all the settings of typescript
tsconfig.app.json -- app related settings(what ts files used and where they saved etc.)

tsconfig.spec.json ---project test related information
package.json --- shows a list of dependencies they are nothing but the modules that are used in project along with their versions etc.
karma.json --- related to karma configuration
angular.json-- related to CLI

style.css is a global CSS file. Whereas an app.component.css is local.

Just for now, rest we can ignore...
src -- is a folder which contains all the source code of project. It contains

components modules, tiles etc. It includes environment related files.
main.ts is a startup file. It contains some imports of core libraries.

app.module.ts(just it is a class normally).

test.cs -------contains test information.
browser.ts -----contains browser information.

Angular framework is based on four core concepts.

Components.
Templates (Data binding and Directives).
Modules.
Services(dependency injection).

Components: Angular application is a collection of components. A component is a building block of an application. Each angular application is made up of one or more components.

Angular Component. It is basically a plain class which is in Typescript and takes extension as '.ts'.

The example AppComponent script file looks is as follows −

// src/app/app.component.ts

// src/app/app.component.ts 
import { Component } from '@angular/core';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'My First Angular Application';

@Component is a decorator. It converts a normal Typescript class to Angular Component.

Inside the @Component decorator, You will find 3 metadata elements.

1. selector / name : used to specify selector name, ex: app-root. app-root used in application root document.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

2. templateUrl : The component template is specified using templateUrl. TemplateUrl is a another metadata of the @Component decorator. ex: app.component.html is the HTML template document associated with the component. Some times you can spcify a piece of template code directly with template metadata.

3. styleUrls :The component style is specified using styleUrls. app.component.css is the CSS style document associated with the component.

AppComponent property: A component class can have some properties of its own. They can be declared inside the class.

There is title declared in the above component class.

And this property can be used them in the HTML template as shown below...

{{ title }}

Template:

A template is basically an HTML Document. It provides all the features of HTML and also binds the component data to HTML DOM elements. It also generates dynamically DOM elements and manages them.

An Angular application by default contains one root module. An angular project can have any number of modules under the root module, which will bootstrap the application and then call other modules as and when needed by the application.

Data binding:

Here, title is a property in AppComponent, and it is bind to template using Interpolation.

Interpolation is technique, that is used to transfer the data from a TypeScript code to an HTML template (view). It is one-way data-binding. It is generally specified in double curly braces Ex: {{ expression }}.

Open component.html file remove all the default code and paste below given code. open app in browser to the result.

// src/app/app.component.html

<!-- Page Content --> 
<div class="container"> 
   <div class="row" class="col-lg-12 text-center" style="padding-top: 50px;">  
       
	<h1> {{ title }} </h1>
	<h2> Running..!! </h2>
          
	</div>
 
</div>

Result:

Directives :

ngif, ngfor etc. used to include logic and manage HTML DOM elements. Will learn in detail in latter classes.

Modules

Angular Module contains the details of all the components and services that are available in a project under a single context.

An Angular application by default contains one root module. An angular project can have any number of modules under the root module, which will bootstrap the application and then call other modules as and when needed by the application.

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

In AppModule module,

NgModule decorator : Converts a plain Typescript / JavaScript class into Angular module.

Inside the decorator there are different options, they are used to specifying different types of elements that used by application.

    declarations - option is used to include components.

    bootstrap - option sets the root component of the Application.

    providers - option includes the services for the Application.

    imports - option is used to import other modules into the Application.

Services :

Services provides a specific services to an application. Services are plain Typescript / JavaScript class. The advantages of service are reusability. Writing a functionality code into a separate service, then it can be used in other component as well. Services are used by components. Services help to organize the code in a project.

Search This Blog

Coding-zon Programming Tutorials