Difference between revisions of "AngularJS component"

Latest revision as of 13:41, 21 June 2018

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.

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.

Source: https://www.infoq.com/articles/angular-component-communication?utm_campaign=rightbar_v2&utm_source=infoq&utm_medium=articles_link&utm_content=link_text

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.

See also

• AngularJS
• JavaScript library
• Web application

External links

• Here is what you need to know about dynamic components in Angular
• Sharing data between Angular components