AngularJS component

From Wiki @ Karl Jones dot com
Revision as of 13:49, 31 December 2016 by Karl Jones (Talk | contribs) (Created page with "In AngularJS, a component is a unit of code. == Component definition object == <code>ng.core.Component()</code> tells Angular that this class definition object is an Ang...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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