Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • The Architecture of an Angular 2 Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.21k
    Comment on it

    In this post, we will understand the architecture of Angular 2 framework. 

    These are the modules that Angular 2 architecture contains: 

    • Module
    • Component
    • Template
    • Metadata
    • Data Binding
    • Service
    • Directive
    • Dependency Injection

     

    Module

    It can be defined as a block of code which is used to do some task. The application in angular can be defined as modules and there are different modules that can be used to build any application. You can get any value from the code like class in the module. Angular 2 provides component class which is basic building block and it is exported from a module.

    You can use export statement to export the component class from a module and it is defined in a file named app.component.ts. 

    export class AppComponent { }

    this statement defines a module and its class named AppComponent as public class. so it is accessible to other modules also.

     

    Component

    It can be defined like a controller class which contains a template. It is used for view of the app and logic. We can define some code that works as a function and can be used inside the application. You can also define css styles to a component.

    @Component is used to register a component. One DOM element will have only one component.

     

    Template

    template is used to define the view of any component. It shows how to display a component.

    Like in the below template it displays name:

    <div>
    
    name is : {{name}}
    
    </div>
    

     

    Metadata

    It tells how to process the class. That means it is used to identify something. Like we have some component class name, @component is a decorator and used to identify that it is a component.

    @Component({
    
     selector : namelist,
    
     template : '<h1>Name is here</h1>'
    
     directives : [MyComponentDetails]
    
    })
    
    export class ComponentList{}

    Here selector,template and directives are decorators.

     

    Data Binding

    It connects the templates and the components.

    These are the types of data binding:

    Interpolation: It shows the value of component within html div tags.

    Property Binding: parent to child property passes.

    Event Binding: It is processed when component method name is clicked.

    Two-way Binding: ngModel directive is used to bind property and event.

     

    Service

    Services are some functions in javascript that can do a particular task. Service can perform any specific task that is defined like any message service or data service.

     

    Directive

    metadata is defined by a directive. These are the types of directives:

    Component Directive: It is used as custom HTML element.

    Decorator Directive: It decorates the elements.

    Template Directive: It converts html into a template.

     

    Dependency Injection

    It is used in angular in order to use different components across the application by passing them as an object.

     

     

    The Architecture of an Angular 2 Application

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: