AngularJS component
In AngularJS, a component is a directive with added template features.
A component is a class that controls a view template. The view is a piece of the web page which displays information for the user, and responds to user feedback.
Providers (Services) are injected in constructor.
Need to explicitly define providers and directives within component decoration.
Hook into component life cycle with hooks.
Properties and methods of component class are available to template.
Contents
Component configuration
The Component method takes a configuration object with three properties.
- The Class method is where you implement the component itself, giving it properties and methods that bind to the view and whatever behavior is appropriate for this part of the UI.
Component definition object
ng.core.Component() tells Angular that this class definition object is an Angular component. The configuration object passed to the ng.core.Component() method has two fields, a selector and a template.
ng.core.Component({
selector: 'my-app',
template: '<h1>Hello Angular</h1>'
})
The selector specifies a simple CSS selector for a host HTML element named my-app. Angular creates and displays an instance of our AppComponent wherever it encounters a my-app element in the host HTML.
The template property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. In this example, the template is a single line of HTML announcing "Hello Angular".
Component communication
- As Angular is built using a component-based application structure, it’s possible to pass data between components.
- You can pass data to child components using `@Input()`
- You can capture data from child components using `@Output()`
- As applications grow, parent:child component communication can become difficult.
- You can use an external data store such as ngrx to architect larger applications.
Bootstrap
Use the bootstrapModule() function to run a module:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
Services
Angular JS services can be injected into components, for very specific use cases.
