Skip to main content

Angular 4

Building Blocks of Angular 4

There are 5 section cover in this blog ..

  1. module 
  2. component 
  3. template
  4. metadata
  5. data-binding

Module

module is a class with ng-module metadata, every angular app has at least one root module encapsulation of different similar functionalities 

how to declare :


@ngmodule({ //decorator
    declareation :[AppComponent,TaskComponent],         //declare Component
    imports :[BrowserModule,FormsModule,HttpModule], //import Module
    providers:[],
bootstrap:[AppComponent] //providing services to all modules component
})

Component

Angular 4 components are simply classes that are designated as a component with the help of a component decorator. 

Every component has a defined template which can communicate with the code defined in the component class. So, let's take a close look at how components are structured.


Metadata

metadata describes how to process the class ,decorator is used to attach metadata

example :  myclass + @Component({---}) /// decorator ==> Component{}
appclass + @NgModule({....}) ===>Module



Templates

used to define view of a component 
looks like HTML, expect for a few differences .
describes how the component is rendered on the page.



Data-Binding

data-binding plays an important role in communication between a template and its component
{{value}}
1.interpolation     DOM <======================= component
[property]="value"
2.property binding   DOM <======================= component 
(event)="event handler"
3.event binding   DOM ========================> component
[{ngModel}]
4. 2 way data binding   DOM <=======================> component



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

Design Patterns

                                                      Design pattern 1. Factory Design Pattern  In Factory pattern, we create object without exposing the creation logic to the client and refer to newly created object using a common interface. Step 1 Create an interface IShape.cs public interface I Shape { void draw (); } Step 2 Create concrete classes implementing the same interface. Rectangle.cs public class Rectangle : I Shape { @Override public void draw () { C onsole.WriteLine ( "Inside Rectangle::draw() method." ); } } Square.cs public class Square : I Shape { @Override public void draw () { C onsole.WriteLine ( "Inside Square::draw() method." ); } } Circle.cs public class Circle : I Shape { @Override public void draw () ...
Post a 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