Skip to main content

Angular 2 - Architecture


Angular is designed to be modular, an Angular 2 app comprises of several components, which are connected via routing or selectors, these components may have templates attached to it which may display component properties and attach events to interact with the properties

Modules


Angular App comprises of several Modules, a module typically exports something of a purpose. A module is a set of similar utilities that perform a similar task. Typically a module may export a class which we may be imported in other modules. Angular 2 itself ships in large modules, some of them are ‘angular/core‘, ‘angular/router‘ and there are more.

Components

Components are the basic building blocks of an Angular 2 app. A component is typically a type-script class which has a template attached, it usually assembles a screen, ui-element or a route in the application. A component may have child components. 
A component has a metadata/ decorator associated which describes the component. Metadata tells angular that the associated TypeScript class is actually to be considered as a component.

Services

A good Angular 2 application is one in which specific tasks are assigned to different services. A component may consume these services to perform these tasks. Typically a component should only deal with the user experience and the display of properties and use services to perform heavy behind the scenes operations. A service must be injected in to the controller before it can be used. This is done via dependency injection.

Dependency Injection

One of the key features of Angular is the dependency injection. Components need to use services to perform tasks, and these services are injected into the component via the injector. The injector provides the instance of the service, so that it can be used in the component. The idea behind dependency injection is to separate out concerns into smaller units and make components depend on these units to perform specific tasks, making your application more manageable and easy to unit test.

Directives

Directives are everywhere in Angular 2. A directive is a TypeScript Class with a metadata. Directives may or may not have a template attached. Component is an example of a directive with a template. There are two kinds of directives in Angular 2, structural and attribute directives. Structural directives modify the structure or layout of the DOM. Attribute directives alter the behavior of the elements. Some of the examples of pre-built directives are ngFor, ngIf, ngSwitch, ngModel etc.









Comments

Post a Comment

Popular posts from this blog

Claims Class For security in .NET4.5 with C#

What is Claim ? A claim in the world of authentication and authorization can be defined as a statement about an entity, typically a user. A claim can be very fine grained: Ram is an admin Ram’s email address is Ram@yahoo.com Ram lives in Mumbai Tom’s allowed to view sales figures between 2009 and 2012 Tom’s allowed to wipe out the universe Claims originate from a trusted entity other than the one that is being described. This means that it is not enough that Tom says that he is an administrator. If your company’s intranet runs on Windows then Tom will most likely figure in Active Directory/Email server/Sales authorisation system and it will be these systems that will hold these claims about Tom.  The idea is that if a trusted entity such as AD tells us things about Tom then we believe them a lot more than if Tom himself comes with the same claims . This external trusted entity is called an  Issuer . The KEY in the key-value pairs is called a  Typ...
1 comment
Read more

Paytm integration

How to integrate Paytm to asp.net site   You will need to create an Checksum on your server. Kindly refer the dll file for the attachment.  Usage of CheckSum API: ·         Add provided “paytm.dll” as a “Reference” in your project. ·         Import namespace “paytm” in your Class with statement “using paytm”. ·         Now Generate CheckSum API as well as Verify CheckSum API are available as follows: o   String CheckSum.generateCheckSum(String masterKey, Dictionary<String, String> parameters) o   Boolean CheckSum.verifyCheckSum(String masterKey, Dictionary<String, String> parameters, StringcheckSum) ·         For Generating CheckSum, use following snippet code: String masterKey = “merchantKey” ; Dictionary<String, String> parameters = new Dictionary<string, string>(); p...
Post a Comment
Read more

How to do auto logout and redirect to login page when session expires using asp.net?

In this article I will explain you how to auto logout and redirect to  login page when users session expires within specific period. Introduction In every applications, we need to maintain the session expiration time  say for example 1hr or 30 minuets and this configuration item we  can do with web.config file or in IIS. But here, application should  redirect to login page automatically when session expires. Configure session time First configure the session timeout value in web.config file as like  below, here I’m configuring the session timeout value as 3 minutes  for this sample . < system.web > < sessionState mode = " InProc " timeout = " 3 " ></ sessionState > </ system.web >   Create Pagebase class create a custom pagebase class and write the common functionality codes into this class. Through this class, we can share the common functions to other web pages. In this class we need...
Post a Comment
Read more