Difference between revisions of "AngularJS component"

Revision as of 13:49, 31 December 2016

In AngularJS, a component is a unit of code.

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