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

What's New in Visual Studio 2017 RC

What's  New in Visual Studio 2017 RC We have many new as well as improved features and experiences in Visual Studio 2017  to make you more productive at things you do every day IntelliSense  IntelliSense comes enhanced with added filtering that makes it much easier to use . Filtering makes long lists much more manageable. With features like Camel Case search you only need to type in the 2 letters in capitals for IntelliSense to appropriately filter results for you that match 2 different words with those letters capitalized. IntelliSense is also smarter now; it will select the best matching result from the list instead of simply picking the top result. Navigation Navigation . Navigate To is much more powerful with better filtering and preview.  We have also fixed Find All Reference by adding color, grouping, and a peek preview in the Find All Ref window. Live editing One of the most useful features is l...
Post a Comment
Read more

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

Question must to read

What is the significance of the Finalize method in .NET? The .NET Garbage Collector does nearly all the clean up activity for your objects. But unmanaged resources (for example: Windows API created objects, File, Database connection objects, COM objects and so on) are outside the scope of the .NET Framework that we need to explicitly clean our resources. For these types of objects, the .NET Framework provides the "Object.Finalize" method, which can be overridden and to clean up the code for un-managed resources. Can it be put in this section? Why is it preferred to use it instead of Finalize for clean up? The problem with Finalize is that garbage collection must make two rounds to remove objects that have Finalize methods. The figure below will make things clearer regarding the two rounds of garbage collection rounds for the objects having finalized methods. Figure 1 In this scenario there are three objects, Object1, Object2 and Object3. Object2 has the Finali...
Post a Comment
Read more