Difference between revisions of "AngularJS component"

Revision as of 14:08, 31 December 2016

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".

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