angularjs component stackoverflow 1

angularjs component stackoverflow

angular.module('myApp')
    .component('component', {
        templateUrl: 'component.html',
        controller: function ComponentCtrl(){
            this.innerProp = "inner";  //Tied to controller scope
        },
        controllerAs: 'vm',   // Replaces scope, by default components use `$ctrl`
        bindings: {
           input: '=?'
        }
});

Here is what the above code is Doing:
1. The component is named `component`
2. The template is `component.html`
3. The controller is `ComponentCtrl`
4. The controllerAs is `vm`
5. The bindings are `input`

### Component Template

The template is the HTML that will be rendered when the component is used.

“`html

{{vm.innerProp}}

{{vm.input}}

“`

### Component Controller

The controller is the JavaScript that will be executed when the component is used.

“`javascript
function ComponentCtrl(){
this.innerProp = “inner”; //Tied to controller scope
}
“`

### Component ControllerAs

The controllerAs is the name of the controller that will be used in the template.

“`javascript
controllerAs: ‘vm’, // Replaces scope, by default components use `$ctrl`
“`

### Component Bindings

The bindings are the properties that can be passed into the component.

“`javascript
bindings: {
input: ‘=?’
}
“`

## Component Usage

“`html

“`

## Component Output

“`html

inner

outer

“`

## Component Demo

[Component Demo](https://codepen.io/james-priest/pen/QWbYQQR)

## Component Documentation

[Component Documentation](https://docs.angularjs.org/guide/component)

Similar Posts