v1.0.0: Angular application restructure

[larsonjj]

Angular Application Restructuring

For Yeogurt v1.0.0, a revamp/restructure is needed for all generated applications. That being said, Angular projects will not be changed by much as they are more-or-less setup with a modular structure. Nonetheless, I would like to keep the user base informed on the direction the project is taking when creating and scaling applications, so feel free to comment and leave feedback in this issue.

Old Structure

Here is an example of what the generator currently produces for angular projects:

├── client
    ├── bower_components
    ├── app                          # Application specific modules (not necessarily reusable)
    |   ├── index
    |   |   ├── index.html
    |   |   ├── index.js
    |   |   ├── index.controller.js
    |   |   ├── index.spec.js
    |   |   └── index.scss
    |   └── main.js                  # Main bootstrap file
    ├── images
    ├── styles                       # Styles folder (Global Stylesheets)
    |   └── main.scss                # Main stylesheet (import everything to this file)
    ├── favicon.ico
    ├── index.html                   # Base template
    └── robots.txt

New Proposed Structure

Here is an example of what could be produced for angular projects:

├── client
    ├── app                                  # Application specific modules (not necessarily reusable)
    |   ├── index                            # Homepage (all related files)
    |   |   ├── __tests__                    # Holds all tests for current folder
    |   |   |   └── index.controller.spec.js
    |   |   ├── index.html
    |   |   ├── index.js
    |   |   ├── index.controller.js
    |   |   └── index.scss
    |   ├── layout                           # Layout structure for app
    |   |   ├── base.html
    |   |   └── base.scss
    |   ├── modules                          # Reusable modules (self-contained, should be project agnostic)
    |   |   └── navbar
    |   |       ├── __tests__
    |   |       |   └── navbar.controller.spec.js
    |   |       ├── navbar.html
    |   |       ├── navbar.controller.js
    |   |       └── navbar.scss
    |   ├── main.js                          # Main bootstrap file
    |   └── main.scss                        # Main stylesheet (import everything to this file)
    ├── lib                                  # Global scripts, styles, etc
    ├── assets                               # Other static files (images, txt, fonts, etc)
    |   ├── images
    |   └── fonts
    ├── bower_components                     # Stores all bower files
    ├── vendor                               # Third-party (non-bower) files
    ├── favicon.ico
    ├── index.html                           # Base template
    └── robots.txt

This slightly updated structure is inspired by another great generator (generator-angular-fullstack) as well as many angular styleguides (johnpapa, mgechev, and toddmotto). I tried to pick some of my favorite features and techniques used between all of these great resources. Of course, I would like throw out some questions and get some feedback on the proposed changes.

Proposed/Existing Sub-generators

Below are the proposed sub-generators that would be usable for projects creating Angular applications.

_Module_

• Asks for route
• Creates a new folder inside of app/ folder
• Creates new files based on name (ex. ng)
  • ng.js → Defines route
  • ng.controller.js → Runs logic for route
  • ng.spec.js → Test for logic
  • ng.html → Template for route
  • ng.scss → Styles for template

_Service_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.service.js
  • ng.spec.js

_Factory_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.factory.js
  • ng.spec.js

_Provider_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.provider.js
  • ng.spec.js

_Directive_

• Creates a new folder inside modules/ (confgurable)
• Ask if user wants seperate template file
• Creates new files based on name (ex. ng)
  • ng.factory.js
  • ng.spec.js
  • ng.html (optional)

_Filter_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.filter.js
  • ng.spec.js

_Decorator_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.decorator.js

_Controller_

• Creates a new folder inside modules/ (confgurable)
• Creates new files based on name (ex. ng)
  • ng.controller.js
  • ng.spec.js

    Questions

Feel free to offer your opinion on these questions (or any others) within the comments section.

• Folders
  • Do their names make sense?
  • Do you like the structure?
• General
  • How can this be improved in your opinion?
  • Is anything confusing?
• Default libraries (Are there any libraries that should be included in every angular project?)
  • ui-router?
  • ng-sanitize?
  • ng-cookie?

    Feedback

As stated above, I would love to get some feedback on what you all think about this new structure. I think it is a massive move forward to the old "sock-drawer" style structure, but there is always room for improvement.

Let me know what you think!

NOTE: I continue to update this issue as more information comes in and feedback is gathered

[larsonjj]

Closing this in favor of generator-neopolitan