4 ms·

Draft for an AngularJS style guide

50 points by own3r 13y ago

edwardhotchkiss 13y ago
Nice work, specifically not suggesting rather than displaying the two main file layout approaches.
alexmic 13y ago
> "Use $resource instead of $http when possible. Highther level of abstraction saves you from redundency." Last time I used angular, $resource was removing trailing slashes [1]. This makes it hard to work with a Django backend and I had to fall back to $http. Also, there's a typo in "redundency" – should be "redundancy". [1] https://github.com/angular/angular.js/issues/992 https://github.com/angular/angular.js/issues/992
- flog 13y ago
  And I'm pretty sure everyone has now agreed $resource is pretty painful.
weavie 13y ago
This is much needed, although I'm not sure about separating your services and directives out by page in the directory structure. These are generally going to be shared components that can be used by multiple pages.
alexandros 13y ago
The separate-by-feature approach gets a much better treatment in ngBoilerplate: https://github.com/ngbp/ng-boilerplate https://github.com/ngbp/ng-boilerplate
- flog 13y ago
  This is the best seed app of the bunch, but still fell down in a few places when I tried it out... Remember when starting a new web project meant opening a notepad and writing some HTML? Yeah, well I spent 4 hours diving into this boilerplate project yesterday and still haven't gotten it right for Angular development and deployment.
  - alexandros 13y ago
    Oh, I know. Try to start a project with angular, coffeescript, and requirejs. On top, have the audacity to not want to use array syntax but have ngmin deal with that. You're in for a world of pain. 4 hours did you say? I've been working on this (in free time, granted) for about a month. It took me a while to believe this isn't solved already. Apparently the angular-seed world and surrounding tooling stil has way to go.
pdelgallego 13y ago
The directory structure does not help to understand what kind of application is this one. Splitting the code into controllers, directives, services, ... or by pages hides the user cases. The only thing the directory structure is revealing is that this application use some kind MVC pattern, and that is just an implementation detail. It would be great that when I open a project I see the main user stories/components, and all code related to a user case lies in a single place.
- AndrewDucker 13y ago
  Except that, largely, code and uses cases crosscut each other. A given set of data, collected on one page, may support several use cases, but separating it out into multiple places will make no sense to someone coming along later who wants to know how to add extra data to that page.
  - deleted 13y ago
    [deleted]
olov 13y ago
Nice initiative. There's little need to clutter the code base with redundant dependency injection ceremony these days (tools do it just fine) so I filed a PR: https://github.com/mgechev/angularjs-style-guide/pull/6 https://github.com/mgechev/angularjs-style-guide/pull/6
city41 13y ago
Is the Angular community moving towards each controller having its own module? A controller per file but all controllers in one module doesn't work so well.
- madlynormal 13y ago
  The community seems to be split. I lean towards separating code by features. Having Controllers, Directives, Services in one file as long as it relates to a particular feature. You can have separate files for shared features.
EugeneOZ 13y ago
Directives divided by pages? Pfff.. Directives, services and filters should be REUSABLE. Danning-Kruger effect, not less.

50 points by own3r 13y ago

Nice work, specifically not suggesting rather than displaying the two main file layout approaches.

> "Use $resource instead of $http when possible. Highther level of abstraction saves you from redundency." Last time I used angular, $resource was removing trailing slashes [1]. This makes it hard to work with a Django backend and I had to fall back to $http. Also, there's a typo in "redundency" – should be "redundancy". [1] https://github.com/angular/angular.js/issues/992 https://github.com/angular/angular.js/issues/992

flog 13y ago
And I'm pretty sure everyone has now agreed $resource is pretty painful.

weavie 13y ago

This is much needed, although I'm not sure about separating your services and directives out by page in the directory structure. These are generally going to be shared components that can be used by multiple pages.

alexandros 13y ago

The separate-by-feature approach gets a much better treatment in ngBoilerplate: https://github.com/ngbp/ng-boilerplate https://github.com/ngbp/ng-boilerplate

flog 13y ago
This is the best seed app of the bunch, but still fell down in a few places when I tried it out... Remember when starting a new web project meant opening a notepad and writing some HTML? Yeah, well I spent 4 hours diving into this boilerplate project yesterday and still haven't gotten it right for Angular development and deployment.
- alexandros 13y ago
  Oh, I know. Try to start a project with angular, coffeescript, and requirejs. On top, have the audacity to not want to use array syntax but have ngmin deal with that. You're in for a world of pain. 4 hours did you say? I've been working on this (in free time, granted) for about a month. It took me a while to believe this isn't solved already. Apparently the angular-seed world and surrounding tooling stil has way to go.

pdelgallego 13y ago

The directory structure does not help to understand what kind of application is this one. Splitting the code into controllers, directives, services, ... or by pages hides the user cases. The only thing the directory structure is revealing is that this application use some kind MVC pattern, and that is just an implementation detail. It would be great that when I open a project I see the main user stories/components, and all code related to a user case lies in a single place.

AndrewDucker 13y ago
Except that, largely, code and uses cases crosscut each other. A given set of data, collected on one page, may support several use cases, but separating it out into multiple places will make no sense to someone coming along later who wants to know how to add extra data to that page.
- deleted 13y ago
  [deleted]

olov 13y ago

Nice initiative. There's little need to clutter the code base with redundant dependency injection ceremony these days (tools do it just fine) so I filed a PR: https://github.com/mgechev/angularjs-style-guide/pull/6 https://github.com/mgechev/angularjs-style-guide/pull/6

city41 13y ago

Is the Angular community moving towards each controller having its own module? A controller per file but all controllers in one module doesn't work so well.

madlynormal 13y ago
The community seems to be split. I lean towards separating code by features. Having Controllers, Directives, Services in one file as long as it relates to a particular feature. You can have separate files for shared features.

EugeneOZ 13y ago

Directives divided by pages? Pfff.. Directives, services and filters should be REUSABLE. Danning-Kruger effect, not less.