kosz / generator-modular Goto Github PK

• Angular Material
• Bootstrap
• Bootstrap UI
• Angular Strap
• No UX Framework

• we can scaffold a service, but not it's test

and yo modular:resource generator

When generating a project with angular-strap I've bumped into these 2 problems:

1. In app/app.js the controller should be named simple "main" and not "mainCtrl".
2. The generator didn't include bootstrap.css style automatically.

I fixed these 2 errors and it works smoothly now ;)

workaround is to create a blank file

• directive subgenerator
• directive js template
• directive js spec template
• directive html template

Options

Directives

• always create controller for directive
• always ask to create controller

Controllers

• setup naming strategy
  • namespacing prefix
  • Ctrl suffix
  • alternative to this - self
  • controllerAs variable name - vm
• always use controllerAs

Services

• always generate factory
• always generate class factory
• always generate function factory
• always generate service

JavaScript & Angular

• function declaration
• scaffold comments/ngdocs ?
• would you like to be asked if you want to add functions to objects ?
• would you still like to be asked if you want to add injections to objects ?

Workaround is to add the $scope in yourself.

This is an uncomfortable bug and it will be fixed shortly.

The "generate reusable Module" option does not work well.

watchers look for changes, but not for added files.

workaround : when adding a new file restart your gulp test / gulp serve

Errors are related to the Ctrl/Controller naming changes.

Workaround is to manually change to the right controller name in app.js or module.js, for the main controller.

Note: this content of this text has been drastically modified based on the comments provided.
Note: it's expected that this document and it's links to other generator-modular wiki pages, to change and be improved with time.

Rationale

As I'm coding generator-modular, I am trying to provide a scalable and robust standard for File Structure organization. This approach will obviously be based on the Google Recommendation for Angular project file structure, however, when trying to anticipate potential problems with large & growing generator-modular based projects, I believe I may have found a few issues, which I would like to discuss here openly, and have them validated and approved, or constructively invalidated, by the community.

A few issues with the Google Recommendation

• the way google recommendation sees the project root
• file naming conventions using mixed dash and snake case
• the lack of clarity regarding route modularity
• the mixed components directory
• ambiguity regarding how modules should be used

This list is short and not very descriptive. For a more in depth analysis of these thoughts please have a look at this wiki page : https://github.com/kosz/generator-modular/wiki/Issues-with-the-Google-Best-Practice-Recommendation-for-Angular-App-Structure

Side by Side example

Here is a side by side example to illustrate the difference between the Google Recommendation and the Modular Proposal. Make sure to click on the image to zoom in.

Camel case in file names violates the Google Recommendation. This is a mistake I made when creating this image ( due to using this convention in recent projects ), and will be fixed in later revisions

Conclusion

So basically the Modular proposal, indicates that base level API objects such as routes,filters,directives or services should live in a type based directory structure, but encapsulate all their files and other components.

That means that we do not drop ALL the directives in the directives folder, we only drop the base level, reusable directives. If a directive contains other directives which only are used inside it, then the child directives should live inside the folder of the parent directive.

• filter subgenerator
• filter js template
• filter js spec template

jshint not setup properly

This is becoming a priority, since my team wants to use ui.router instead of ngRoute.

Gulp crashes when trying to process empty scss-file.

➜  temp  gulp serve
[09:57:49] Using gulpfile ~/code/web/temp/gulpfile.js
[09:57:49] Starting 'styles'...
[09:57:50] Starting 'clean:tmp'...
[09:57:51] Finished 'clean:tmp' after 383 ms
[09:57:51] Starting 'scripts'...
[09:57:52] all files 0 B
[09:57:52] Finished 'scripts' after 1.57 s
gulp(9696,0x7fff74940300) malloc: *** error for object 0x10433f5a9: pointer being freed was not allocated
*** set a breakpoint in malloc_error_break to debug
[1]    9696 abort      gulp serve

Seen on new freshly generated project.

The module dist folder should not have index.html, and maybe no vendor assets ?

not really a workaround, but css minification can be disabled to avoid the error, by commenting out the .pipe($.csso()) line form the gulp/build.js file

And it should, even if you don't specify you want it injected.

The demo templates are being built in the dist of a Module project.

The dist directory should look different for Modules.

And the demo content such as demo app, controllers, and templates, should not be packaged in dist.

gulp tasks work pretty well, but the default task throws an error.

The work around is not to use gulp default, so don't run

gulp

instead run a specific task :

gulp serve

This is causing problem in modular deployments, which copy over the old version of dist, before the new one is ready.

Not triggering cleans properly may be causing some other issues in other areas as well.

Gotta keep an eye on this.

very annoying when using touch file.scss

by refreshed i mean either hit the refresh button, or re-save the file to trigger the watcher again

currently gulp serve:dist or gulp build, inside a module project, create a dist folder with index.html and the demo code.

this is ok for demo-ing the module, but a separate task should be provided, that builds a different dist folder that contains a module distribution without the demo code or index.html. This dist folder should provide the file to be imported into other projects.

This issue should fix :

#27
#17

how to prefix suffix a controller/directive/etc
how to build the file name based on the controller/directive/etc name

how to suffix .js file name with type of object

Embarrassing bug which I've ignored for about 2 months >:

Since ATScript and TypeScript seemed to have merged, based on ng-conf.

TypeScript is therefore the way to go

ok clearly, in order to continue adding features i first need to refactor.

the templates need to be a lot more modular, so that different options can be easily provided, and code can be reused.

this becomes the first priority ...

currently module('demo' , and it's files are being packaged with the module code.

modular:route should default to src/routes
modular:controller should default to src/routes/main
modular:directive should default to src/directives
modular:service should default to src/services

Working directly in index.html can be problematic.

• Sometimes the file gets injections and gets modified on you as you are editing it.
• a tmp dir is created by the gulp script next to the .tmp dir, duplicating the index.html file and causing confusion