ng-component-api
Provides an extra layer for register AngularJs components v1.5.x
.
Install
npm install ng-component-api --save
Understanding Components
In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture.
Advantages of Components:
- simpler configuration than plain directives
- promote sane defaults and best practices
- optimized for component-based architecture
- writing component directives will make it easier to upgrade to Angular
When not to use Components:
- for directives that need to perform actions in compile and pre-link functions, because they aren't available
- when you need advanced directive definition options like priority, terminal, multi-element
- when you want a directive that is triggered by an attribute or CSS class, rather than an element
Creating and configuring a Component
Components can be registered using the .component()
method of an AngularJS module (returned by {@link module angular.module()
}). The method takes two arguments:
- The name of the Component (as string).
- The Component config object. (Note that, unlike the
.directive()
method, this method does not take a factory function.)
Example:
; const mortgageForm = template: ` <form> {{ $ctrl.applicant | json }} </form> ` { thisapplicant = name: 'Todd Motto' email: 'todd@toddmotto.com' ; } ; angular;
Creating and configuring a Component with ng-component-api
tab-component.js
var tab = bindings: label: '@' require: tabs: '^^' transclude: true template: ` <div class="tabs__content" ng-if="$ctrl.tab.selected"> <div ng-transclude></div> </div> ` { this { thistab = label: thislabel selected: false ; thistabs; }; } ; ;
tabs-component.js
; var tabs = components: tab // <- with ng-component-api transclude: true { this { thistabs = ; }; this { thistabs; }; this { for var i = 0; i < thistabslength; i++ thistabsiselected = false; thistabsindexselected = true; }; } template: ` <div class="tabs"> <ul class="tabs__list"> <li ng-repeat="tab in $ctrl.tabs"> <a href="" ng-bind="tab.label" ng-click="$ctrl.selectTab($index);"></a> </li> </ul> <div class="tabs__content" ng-transclude></div> </div> ` ; ;
app.js
; ; // init compApi; ; ; // Regiter component angularcomponents tabs other ;
tabs.html
... ... ...
License
The Mit License