Questions tagged [angularjs-components]

Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. A Component cannot do any DOM manipulation like directives (in the link and compile methods).

Component is an feature introduced in version 1.5.

From Understanding Components in the AngularJS documentation:

In Angular, 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 Angular 2'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 2

The applications built using the new framework are completely component-oriented. So using them in your application it's not only a good practice but will make your application closer to the new Angular style.

350 questions
11
votes
2 answers

Use resolve with angularjs component

I am trying to resolve a list of customers prior to rendering a page. Here is the state provider reference, where I have the resolve methods. angular.module('app') .config(($stateProvider) => { $stateProvider .state('customers', { …
11
votes
3 answers

Angular 1.5 unit test controller that requires parent component's controller

I'm trying to unit test a (child) controller of an AngularJS 1.5 (with Webpack) component that requires a parent component and a controller from another module. Child controller structure: function ChildController () { var vm = this; …
profWoland
  • 111
  • 1
  • 3
11
votes
2 answers

angularjs components getting a form inside template

so I have a component with a template containing a form. mycomponent.html:
How can I access myForm inside the component controller? Currently I'm injecting $scope to…
Luna
  • 349
  • 1
  • 4
  • 12
10
votes
3 answers

Angular 1.5 component attribute presence

I'm refactoring some angular directives to angular 1.5-style components. Some of my directives have behavior that depends on a certain attribute being present, so without the attribute having a specific boolean value. With my directives, I…
Seba Kerckhof
  • 1,294
  • 1
  • 14
  • 23
9
votes
1 answer

Is there a way to add a class to the component root element?

Except for adding the class in html. I mean something like that: In html In js angular.module('app').component('myComponent', { template: '
Inner element
', className:…
through.a.haze
  • 516
  • 1
  • 6
  • 15
9
votes
1 answer

Angular 1.5 Component Two Way Binding Not Working

I have an Angular 1.5.3 component that appears to not update the values for a two way binding. My controller changes the values which are passed to the component. The component appears to read the default values when the controller is initialized…
9
votes
0 answers

AngularJS 1.5 components in tables

With the release of AngularJS 1.5, I thought it would be a good idea to break up my existing application to use the new Component-based Architecture they're advocating. I was able to convert most of my application to components, but I ran into a…
user5119648
9
votes
3 answers

What is a component in AngularJS?

I was doing some reading about directives and was wondering what the distinction was between a directive and a component, when I found that there are lots of components in AngularJS. There is a function component, type component, service component,…
James Drinkard
  • 15,342
  • 16
  • 114
  • 137
8
votes
2 answers

Pitfalls of the New AngularJS ng-ref Directive

The release of AngularJS V1.7.1* introduces the new ng-ref directive. While this new directive enables users to easily do certain things, I see great potential for abuse and problems. The ng-ref attribute tells AngularJS to publish the controller of…
georgeawg
  • 48,608
  • 13
  • 72
  • 95
8
votes
2 answers

How to handle $ctrl. in AngularJS?

I have a Methode from an API. It returns a promise which resolves to an $ctrl(?) object. This objects should contain a measurement and will be updated whenever it receive a new data. getMeasurements.latest(filter) //only a object to filter…
8
votes
2 answers

$translate.instant does not translate values in AngularJS component when component starts

With Angular Translate and $translate.instant() method I built AngularJS's select component with automatic switching between languages:
8
votes
1 answer

How to access ngModelController in Angular1.5 components?

When I use angular.component() to create the brand new component that angular 1.5 provides, there's no link function, so the old way of injecting ngModelController or any other controllers doesn't work. require: 'ngModel', link: function(scope,…
Kyle Xie
  • 722
  • 1
  • 8
  • 28
7
votes
1 answer

How to test changes on Component Bindings by parent element?

I have a component like follows and would like to test what the $onChange method does in case the binding myBinding changes. I tried the whole morning, but could not find a way to solve this. angular .module('project.myComponent', []) …
n00n
  • 654
  • 1
  • 10
  • 30
7
votes
1 answer

When using $compile on component, why is the scope passed through $parent?

I'm trying to dynamically compile an Angular component using $compile, but the scope isn't passed to the components scope, but to the $parent scope instead. Here is a simple component that binds to a myTitle-attribute and presents…
Nikolaj Dam Larsen
  • 5,455
  • 4
  • 32
  • 45
7
votes
1 answer

D3.js 4 with AngularJS 1.5 ( Components or Directives ? )

i want to use D3.js v4 with AngularJS 1.5x In the past i used .directives for the charts, but now i was wondering if it's possible use .components instead of directives, and if it's a good practice. Check the sample case on Plunkr The problem…
Héctor León
  • 2,210
  • 2
  • 23
  • 36
1
2
3
23 24