- The first big change in Angular over AngularJs is Components.
- Components replace the Controllers of AngularJs. But that is where the similarity ends.
- Angular Components do not look like Controllers.
- The Components are actually similar to the directives of AngularJs.
Angular Architecture
- The architecture of an Angular Application is based on the idea of Components.
- An Angular application starts with a Top-level component called Root Component.
- We then add child components forming a tree of loosely coupled components.
Angular Modules
- The Angular provides a nice way to organize Components, Services, Directives by using the concept called Angular Modules.
- Special directives are used to create the Modules. The Angular Module is also called ngModule.
- Use Angular Module (or ngModule) to organize all the Angular code within a bigger Angular Application.
- The Application is made up of several Angular Modules acting together.
- Each Module implements a specific feature or functionality of the application.
JavaScript Modules (ES2015)
- Do not confuse Angular Modules with JavaScript Modules.
- The Angular Modules are specific to Angular.
- The JavaScript Modules are part of the JavaScript language specification. The ES2015 specifications set the standard for defining modules.
- These Modules define:
- the scope of the variables,
- functions,
- and classes defined inside the module.
- These variables are always local to the module and are not visible outside the module.
- The modules without public methods or properties are useless.
- The modules help us to create public members by using the Export statement.
- The other modules can use these public members using the Import statement.
- Angular uses the JavaScript modules via TypeScript.
- We build Components, Services, directives using the JavaScript Module.
- Each Component is a JavaScript Module. Each Service is a JavaScript Module. And then we combine them together using the Angular Module.
Anatomy of Angular JavaScript Module
- In Angular Application, we mainly build Components, Services & Directives.
- Angular provides a very consistent way to define these building blocks.
- These are defined inside a JavaScript Module and follow the pattern shown below:
import { Component } from '@angular/core';
@Component({
// Add your component metadata configuration here (selector, template, styleUrls, etc.)
})
export class AppComponent {
SomeObject: any;
Title: string = "Hello Angular";
getSomeObject(): any {
return this.SomeObject;
}
}
- The above example has three parts:
- An import statement at the beginning.
- A class (AppComponent) at the bottom.
- Class is defined with an export statement.
- We decorate the class with a decorator @Component immediately above the class.
Import Statement
- The import statement tells Angular where to find the external functions that we are using in our module.
- All the external dependencies like third-party libraries, our own modules, or modules from Angular must be imported.
- It is similar to the Import statement of Java or Using statement of C#.
- You can import only the exported members from the other modules.
The Class
- The Class contains the logic of the application.
- It can contain methods & properties just like C# or Java classes.
- The class must be defined with the export keyword if you want to use the class in another module.
The Class Decorator
- AppComponent is just a class. There is nothing Angular about it. It is the decorator, which tells Angular how to treat the class.
- For Example,
- @Component decorator tells Angular that the Class is a Component.
- Similarly, a @Directive tells Angular that the class is a Directive.
- Angular currently has the following class decorators:
- @Component
- @Directive
- @Injectable
- @NgModule
- @Pipe
Building Blocks of Angular Application
- The seven main building blocks of an Angular Application:
- Component
- Templates
- Metadata
- Data Binding
- Directives
- Services
- Dependency Injection
Component
- The Angular Component is a class, which we decorate by @Component class decorator.
- The Component controls the part of our user interface (or view).
- The component, that we had created in the Create Your First Angular Application as shown below:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'GettingStarted';
}
- The Component has four important parts:
- Import Statement
- Class
- Template
- Metadata
- The Import statement imports the dependencies required by this component.
- The class contains the application logic. It is decorated by the @Component class decorator.
Template
- The Component needs a View to display. The Template defines that View.
- The Template is just a subset of HTML that tells Angular how to display the view.
- It is a normal HTML page using tags like h1, h2, etc.
- It also uses Angular-specific markup like {} (for interpolation), [] (for Property binding) etc.
Metadata
- Metadata tells Angular how to process the class.
- We attach the Metadata to a class using a class decorator. When we attach @Component class decorator to the class, then it becomes Component class.
- The class decorator uses the configuration object, which provides Angular information it needs to create the component.
- For Example, @Component directives come with configuration options like:
- selector
- templateURL (or template)
- directives, etc
Data Binding
- Angular uses Data Binding to get the data from the Component to our View (Template).
- This is done using the special HTML Angular-specific markup known as the Template Syntax.
- Angular supports four types of Data binding:
- Interpolation - Data is bind from component to View
- Property Binding - Data is bind from component to the property of an HTML control in the view
- Event Binding - The DOM Events are bind from View to a method in the Component
- Two-way Binding/Model Binding - The data flow in both directions from view to component or from component to view
Directive
- The Directives help us to manipulate the view.
- A directive is a class, which we create using the @Directive class decorator.
- It contains the metadata and logic to manipulate the DOM.
- The Views are created by the Angular by using the Templates defined in the Components. These templates are dynamic and are transformed as per the Directives.
- Angular supports two types of directives:
- Structural directives which change the structure of the View
- Attribute directive, which alters the style of our view
Services
- Services provide service to the Components or to the other Services.
- Angular does not have any specific definition for Services.
- You just create a class, export a method that does some specific task and it becomes a service. You do not have to do anything else.
- For Example:
export class MyLogger {
AddToLog(msg: any) {
console.log(msg);
}
}
- And in any of our controllers, we can just invoke it using:
log: MyLogger = new MyLogger();
constructor() {
this.log.AddToLog("Component Created");
}
- These are plain Javascript Modules. There is nothing Angular about these Services.
- What Angular does is to make these services available to the components using what is known as dependency injection.
Dependency Injection (more in services and dependency injection chapter)
- Dependency injection is a method by which a new instance of a service is injected into the component, which requires it.
- The dependencies injection is mostly used to inject services into components or to other services.
- The Angular does this using the injector.
- When a component is created, Angular looks at the Component Metadata for the Services, on which the Component is required.
- The injector then creates the instance of the Service and injects it into the component using its constructor.
- If the service is already created, then the injector does not create the service but uses it.
- The Service needs to tell the Angular that it can be injected into any components, which requires it.
- This is done by using the @Injectable call decorator:
@Injectable()
export class MyLogger {
AddToLog(msg: any) {
console.log(msg);
}
}
Comments
Post a Comment