-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Missing styleguide for component #766
Comments
What suggestions does the community have for this? I absolutely want a component section |
I like it this way:
Alternatively move component registration to the bottom:
The problem is that I would prefer using the new $ctrl reference instead of vm which makes the vm-pattern inconsistent. So either switch completely to $ctrl or simply add controllerAs: 'vm' to the component settings object to be consistent with the rest of the style guide :) |
I like the second way better. I'd also consider putting methods on a prototype to make it easier to migrate to ES6 classes later. I also agree it's time to switch to |
I prefer the first way fwiw 😁 |
First method is my presonal fav. I'd add to both controllers:
of course we can change the name of |
This is a bit more opinionated and ES2016 but for my components I do it like that : (function() {
'use strict';
/*
<active-places data="">
</active-places>
*/
const componentConfig = {
bindings: { data: '<' },
templateUrl: 'components/active-places/active-places.widget.html',
controller: ActivePlacesController,
};
/* @ngInject */
function ActivePlacesController(activityService) {
Object.assign(this, {
activities: [],
doFunnyStuff,
$onInit,
})
function $onInit() {
activityService.list()
.then(response => { this.activities = response })
.catch(console.error)
}
function doFunnyStuff() {
this.activities.push('yolo');
}
}
angular
.module('app.widget.activeplaces')
.component('activePlaces', componentConfig);
}()); I like to have a copy-pastable snippet at the top of my file, that make me gain a lot of time. And it is more explicit and useful when developing in a project than the module and component declaration AMHO. |
Here is a revision using ES6 if you are interested. |
This is also opinionated but I like to keep it simple. No vm, just $ctrl. No division of what to be exposed to the view. Thoughts?
|
I helped push the team for a I also voted very publicly for Other things to consider are
These are just some examples I grabbed out of the many ways I have seen and used Let's keep the chat going on these and any other relevant ones. |
I am keen on the 1st format that declares the component at the top. The reason is that the 2nd version introduces a new variable I would also be keen to put the controller methods on the prototype. Unlike services, you can get multiple instances of controllers, especially if used in components, and it would seem more favourable not to be creating new copies of every method per instance. Since components require a controller as, the default of I have always been calling the function It is important in components to make use of the lifecycle hooks, rather than the controller constructor:
For output bindings I have been following the approach of having a handler method So it all tends to look like this:
|
@petebacondarwin I like what you have with a few changes. I prefer not to embed the
My larger concern is about the use of |
I had this problem in my example with the promise then handler. I chose to use |
yeah, but that is not fun :) that's another reason we used |
Well you can always go with $ctrl in that case On 14 Sep 2016 19:05, "John Papa" notifications@github.com wrote:
|
Right now I'm doing it like this (going with $ctrl): ( function() {
'use strict';
var component = {
bindings: {
data: '='
},
controller: controller,
templateUrl: '/breadcrumbs.html'
};
angular.module( 'app' ).component( 'breadcrumbs', component );
function controller( $log, $state ) {
var logger = $log.getLogger( 'breadcrumbs' );
var $ctrl = this;
logger.log( $ctrl );
$ctrl.goToState = goToState;
function goToState( breadcrumb ) {
logger.log( 'goToState()', breadcrumb );
$state.go( breadcrumb.state, breadcrumb.data );
}
}
} )(); What do you guys think? |
I guess one could be inspired from Todd Motto styleguide ? |
Yes but that's ES2015. What happens with people still stuck with pre-ES2015? |
Personally I've been using the following style: (function(){
'use strict';
angular
.module('app')
.component('exampleComponent', exampleComponent());
function exampleComponent() {
var component = {
bindings: {
/* bindings - avoiding "=" */
},
controller: ExampleComponentController,
controllerAs: 'vm',
templateUrl: 'path/to/example-component.html'
};
return component;
}
ExampleComponentController.$inject = ['exampleService'];
/* @ngInject */
function ExampleComponentController(exampleService) {
var vm = this;
/* generic controller code */
}
})(); |
What about providing unique prefix for component as in directive? Is it considered necessary? |
@petebacondarwin I like your example as it emphasizes one way data bindings and the need to copy them in the
|
|
@petebacondarwin thanks for the response, makes sense. By declaring methods in the scope of the constructor function that reference variables also declared in the scope of the constructor function, you can gain a kinda private state (through a closure). For controllers that may be doing a little too much, this can be helpful for, among other things, distinguishing between state that could potentially be mutated directly in the template and state that undoubtedly cannot. That appears to not be possible in your setup. Instead, do you bind all state to |
/* recommended */
function dataService() {
var someValue = '';
var service = {
save: save,
someValue: someValue,
validate: validate
};
return service;
////////////
function save() {
/* */
};
function validate() {
/* */
};
} in that you explicitly name the variable, then return it. |
I am using an aproach similar to texonidas's, but decided to keep the default $ctrl in the html (not using controllerAs). file name: example.component.js
|
Should the component be registered with the module? My teams interpretation of the v1 style guide is that all controllers should be registered with the module and referenced by the name.
|
Instead of using directives we can use component on those places where we dont need to DOM manipulate. But I cant find any styleguide for this in angularjs 1.5.
The text was updated successfully, but these errors were encountered: