cgross/generator-cg-angular

Yeoman generator for Enterprise Angular projects.

generator-cg-angular's Issues

Error generating build with ie8 comments

I'm having an issue where when i'm grunt building my project. The javascript libraries referenced in the ie conditionnal comments are not included.

 <!--[if lt IE 9]>
    <script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv-printshiv.js"></script>
    <script type="text/javascript" src="bower_components/respond/respond.src.js"></script>
  <![endif]-->

I guess since the information is in comments, build is not taking this information in consideration. Is there anyway to fix this problem ?

`yo cg-angular` returns error: generator not found

When I go npm list --global it's there. I'm not having this problem with any other yeoman packages. Is it corrupt maybe?

Missing Sub-Generators

I completely love this generator, but the lack of sub-generators for route, controller and modules is a show stopper for me. Please consider adding the above sub-generators.
This is the best generator for large angular projects on the Internet.
Thanks

Putting Ctrl in the name of the controller is redundant.

It will appear in the markup as ng-controller="Foo" so it's a violation of DRY to generate ng-controller="FooCtrl". The reasoning behind this preference is pretty well covered in this blog post, so I won't repeat it here.

question/enhancement: Add example of single Auth App

I'm working on a single signon app, with multiple modules, gated by permission level and was wondering if anyone has an example utilizing this generator they'd be willing to share.

If not, I'll keep this updated.

common.js still using old colors.js format (need to update to chalk.js format)

Running yo cg-angular will result in this error:

TypeError: Cannot read property 'bold' of undefined
at Object. (generator-cg-angular\node_modules\yeoman-generator\lib\util\common.js:5:56)

It turns out generator-cg-angular\node_modules\yeoman-generator\lib\util\common.js is using the old colors.js format:

module.exports.yeoman =
'\n     _-----_' +
'\n    |       |' +
'\n    |' + '--(o)--'.red + '|   .--------------------------.' +
'\n   `---------´  |    ' + 'Welcome to Yeoman,'.yellow.bold + '    |' +
'\n    ' + '( '.yellow + '_' + '´U`'.yellow + '_' + ' )'.yellow + '   |   ' + 'ladies and gentlemen!'.yellow.bold + '  |' +
'\n    /___A___\\   \'__________________________\'' +
'\n     |  ~  |'.yellow +
'\n   __' + '\'.___.\''.yellow + '__' +
'\n ´   ' + '`  |'.red + '° ' + '´ Y'.red + ' `\n';

Instead, you should add a chalk.js dependency to your package.json file: "chalk": "~0.1.0"

And then update your common.js file:

var chalk = require('chalk');

module.exports.yeoman =
'\n     _-----_' +
'\n    |       |' +
'\n    |' + chalk.red('--(o)--') + '|   .--------------------------.' +
'\n   `---------´  |    ' + chalk.yellow.bold('Welcome to Yeoman') + ',    |' +
'\n    ' + chalk.yellow('(') + ' _' + chalk.yellow('´U`') + '_ ' + chalk.yellow(')') + '   |   ' + chalk.yellow.bold('ladies and gentlemen!') + '  |' +
'\n    /___A___\\   \'__________________________\'' +
'\n     ' + chalk.yellow('|  ~  |') +
'\n   __' + chalk.yellow('\'.___.\'') + '__' +
'\n ´   ' + chalk.red('`  |') + '° ' + chalk.red('´ Y') + ' `\n';

npm issues: deprecated ngmin

Is there a chance, to replace ngmin by ng-annotate?

npm WARN deprecated [email protected]: use grunt-ng-annotate instead
npm WARN deprecated [email protected]: use ng-annotate instead

FontAwesome out of date

A lot of the new icons from FontAwesome are missing.

Changing app.less not reloading

Hi!

The generator-cg-angular is amazing, thank you for the good work.

This is more like a question than an issue: I'm updating app.less, or any other .less file, and the styles is not being applied on the browser. I mean, I see the less files being reloaded in console but the style are not really applied.

Am I missing something?

dist folder in gulpfile is not configurable

It's just hardcoded 'dist/' everywhere.

undefined - package name? in cli for partial

The feedback in cli for cli partial is missing the package 'name' or some other variable.
It works fine, but the feedback is confusing :)
Example:
yo cg-angular:partial mod1
[?] Enter your route name (i.e. /mypartial/:id). If you don't want a route added for you, leave this empty. /mod1
undefined index.html <-- guess ' %s' not defined
undefined app/app.less <-- guess ' %s' not defined
undefined js/setup.js <-- guess ' %s' not defined
create partial/mod1/mod1.js
create partial/mod1/mod1.html
create partial/mod1/mod1.less
create partial/mod1/mod1-spec.js

enhancement: ui-angular sub-generators for states and state views

So that we could run
yo cg-angular:state newState
and then get to choose options like its url, does it need a new template or controller (run partial sub-generator and inject references into the state config), maybe go so far as to create an option for factory creation and referenced in resolve: property.
SImilarly,
yo cg-angular:state newStateView
would ask which state the view goes in and then creates the partials
Save time and mistakes with basic state scaffolding.

'yo cg-angular' throws TypeError

Hi,

I installed generator-cg-angular to a local folder using:

$ npm install generator-cg-angular

$ yo --version
1.0.3

$ yo cg-angular

TypeError: Cannot read property 'bold' of undefined
    at Object.<anonymous> (~/tmp/angular_demos/angular-cg-demo/node_modules/generator-cg-angular/node_modules/yeoman-generator/lib/util/common.js:5:56)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (~/tmp/angular_demos/angular-cg-demo/node_modules/generator-cg-angular/node_modules/yeoman-generator/lib/base.js:91:26)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

The file ~/tmp/angular_demos/angular-cg-demo/node_modules/generator-cg-angular/node_modules/yeoman-generator/lib/util/common.js looks like this:

module.exports.yeoman =
'\n     _-----_' +
'\n    |       |' +
'\n    |' + '--(o)--'.red + '|   .--------------------------.' +
'\n   `---------´  |    ' + 'Welcome to Yeoman,'.yellow.bold + '    |' +
'\n    ' + '( '.yellow + '_' + '´U`'.yellow + '_' + ' )'.yellow + '   |   ' + 'ladies and gentlemen!'.yellow.bold + '  |' +
'\n    /___A___\\   \'__________________________\'' +
'\n     |  ~  |'.yellow +
'\n   __' + '\'.___.\''.yellow + '__' +
'\n ´   ' + '`  |'.red + '° ' + '´ Y'.red + ' `\n';

Thankful for pointers,

Patrick

Question: Was there an example home partial before?

I seem to remember there being files for the default home route before? Or am I confusing that with the angular seed.

It's weird that as soon as you generate your cg-angular site and you do a grunt serve, you get a blank page. It would be nice to have something in it.

or maybe a task to generate an example page like yo cg-angular:example

If you like the idea I'll do some work on it.

Generator assumes that all app content should be in a container

The index.html template structures the ui-view inside a container and row then each partial is coded with the col-md-12

This makes it impossible for any partial to expand beyond the container without having to edit the structure of index.html and EVERY partial created thereafter.

The col-md-12 is unnecessary because all divs are 12 columns anyway.

I would suggest simplifying the index file to

<script src="http://localhost:35729/livereload.js" data-concat="false"></script>

Then each partial when created can have the container (if it is a route) and it would be nice to insert dummy content

{{helloMyPage}}

The controller file could be preloaded with the message

angular.module('myApp').controller('myPageCtrl',function($scope){
$scope.helloMyPage = "Hello myPage";
});

The only problem with this idea is that it would potentially break current apps built the other way.

Use UI-Bootstrap by default

This is in many ways the perfect generator for our team.

Who uses Bootstrap with JQuery in enterprise? AngularJS is our choice against the JQuery mess.

Why not use http://angular-ui.github.io/bootstrap/ as by default and generate the module to work with it from the start.

Improve documentation on extending and changing .yo-rc.json

I am trying to add requirejs using the .yo-rc.json file. However I am not entirely sure how it would work as I need to inject some stuff in more than one place in a single file (the requirejs main.js file). Another thing I noticed is that there are undocumented options - relativeToModule and undocumented template variables - filename.

Directives not saving their names to files, causes conflicts with simple directives

Kudos on the new build! It's just about perfect, tho there's a bug in saving the directive file names on my build.

For complex directives, everything wires up fine throughout the generation but filenames are all directive.* instead of the terminal command name. This causes a conflict with simple directives saving to the same folder since they are both directive.js.

The stubborn workaround of course is to rename the files manually then change the references in index.html and app.less.

Cheers and really stellar job all in all!

Output from terminal for simple directive, notice file names

$ yo cg-angular:directive checkin
[?] Does this directive need an external html file (i.e. partial)? No
[?] Where would you like to create the directive files? directive/
updating index.html
create directive/directive-spec.js
create directive/directive.js

Output from terminal for simple directive, file names

$ yo cg-angular:directive cart
[?] Does this directive need an external html file (i.e. partial)? Yes
[?] Where would you like to create the directive files? directive/cart/
updating index.html
updating app.less
create directive/cart/directive-spec.js
create directive/cart/directive.html
create directive/cart/directive.js
create directive/cart/directive.less

And in that resulting directive.js

angular.module('ecopos').directive('cart', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {

        },
        templateUrl: 'cart/cart.html',
        link: function(scope, element, attrs, fn) {


        }
    };
});

Support for source maps

maybe look at using grunt-concat-sourcemap instead to map source files

Bootstrap 3 support

Would you consider branching to support for the upcoming angular-ui bootstrap 3 version?

https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2

problem with quotes

source:
<ng-include src="'includes/scripts.html'"></ng-include>

desti:
<ng-include src="&apos;includes/shortcut.html&apos;"></ng-include>

Broken build feature - "$injector:nomod" is not finding module

When we build the dist folder version of the app give the following error:

Uncaught Error: [$injector:nomod] Module 'gg-angular-skeleton' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. "app.full.min.js:5"

We get this error after adding 1 module with one partial inside its directory.
We see the same error no matter which router we choose at the outset.

We expect the build to work with modules and partials together.

Any ideas?

Live reload isn't working.

I noticed that live reload isn't working out of the box. I believe we need to be using middleware or injecting the script to load from our body.

gulp build doesn't work out of the box

in just generated project: gulp build

module.js:340
    throw err;
          ^
Error: Cannot find module 'gulp-concat'

deprecated grunt-regarde

Grunt-regarde has been deprecated in favor of grunt-contrib-watch...

grunt-ngmin

grunt-ngmin is declared as deprecated. Following their documentation grunt-ng-annotate should be used instead.

Would be great to adopt the generator to use it.

Thanks

How to generate partial in submodule directory

I'm using the v3.1.0 branch to generate a submodule "home" in directory home.

After creating the submodule I'd like to generate a partial / route for that same name. The problem is that the generator seems to overwrite the existing module definition and replace it with a controller definition (using the main app module) if I use the same directory.

I'm trying to follow this layout as much as possible:
Best Practice Recommendations for Angular App Structure

Can this be done?

Empty js file when grunt build

Hello,

My project requires to have all files as absolutes url in the index.html

...
<!-- Main App JS -->
<script src="/js/setup.js"></script>

<!-- Controllers -->
<script src="/js/controller/app-menu.js"></script>
<script src="/js/controller/message.js"></script>
...

Since I have done that :

➜  frontend git:(develop) ✗ grunt build
...
Done, without errors.
➜  frontend git:(develop) ✗ ls -l dist 
total 12
-rw-rw-r-- 1 ruben ruben    0 Mar 28 13:02 app.full.min.js
drwxrwxr-x 4 ruben ruben 4096 Mar 28 13:02 bower_components
drwxrwxr-x 2 ruben ruben 4096 Mar 28 13:02 css
-rw-rw-r-- 1 ruben ruben 1149 Mar 28 13:02 index.html

If I remove the heading slash for all files in the index.html, the app.full.min.js is sucessfully generated (but then I got some javascript errors when using the app)

Any one had the same issue?

Regards,

Ruben

Errors with yo cg-angular

I'm following your example and get errors from the start. Was wondering if you could help me out with these? I have installed yeoman and used it for the regular angular generators without issues.

Here are my steps:

1. sudo npm install -g grunt-cli yo bower
2. sudo npm install -g generator-cg-angular
3. mkdir MyNewAwesomeApp
4. cd MyNewAwesomeApp
5. yo cg-angular

bower angular#>= 1.0.8 cached git://github.com/angular/bower-angular.git#1.2.24 bower angular#>= 1.0.8 validate 1.2.24 against git://github.com/angular/bower-angular.git#>= 1.0.8 bower angular#>=1 cached git://github.com/angular/bower-angular.git#1.2.24 bower angular#>=1 validate 1.2.24 against git://github.com/angular/bower-angular.git#>=1 bower angular#>= 1.0.2 cached git://github.com/angular/bower-angular.git#1.2.24 bower angular#>= 1.0.2 validate 1.2.24 against git://github.com/angular/bower-angular.git#>= 1.0.2 npm WARN deprecated [email protected]: use ng-annotate instead npm ERR! Error: EACCES, mkdir '/Users/des/.npm/adm-zip/0.2.1' npm ERR! { [Error: EACCES, mkdir '/Users/des/.npm/adm-zip/0.2.1'] npm ERR! errno: 3, npm ERR! code: 'EACCES', npm ERR! path: '/Users/des/.npm/adm-zip/0.2.1', npm ERR! parent: 'phantomjs' } npm ERR! npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Darwin 13.3.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/des/Sites/JavaScript/AngularJS/MyNewAwesomeApp
npm ERR! node -v v0.10.30
npm ERR! npm -v 1.4.21
npm ERR! path /Users/des/.npm/adm-zip/0.2.1
npm ERR! code EACCES
npm ERR! errno 3
npm ERR! stack Error: EACCES, mkdir '/Users/des/.npm/adm-zip/0.2.1'
bower angular-ui-router#~0.2 install angular-ui-router#0.2.11
bower moment#~2.5 install moment#2.5.1

Further down I also hit this error...

bower font-awesome#~4.0 progress received 0.9MB of 1.8MB downloaded, 49% bower angular#~1.2 invalid-meta angular is missing "ignore" entry in bower.json bower angular#~1.2 resolved git://github.com/angular/bower-angular.git#1.2.24 SOLINK_MODULE(target) Release/validation.node SOLINK_MODULE(target) Release/validation.node: Finished npm ERR! git clone [email protected]:pipobscure/fsevents Cloning into bare repository '/Users/des/.npm/_git-remotes/git-github-com-pipobscure-fsevents-2ef85406'... npm ERR! git clone [email protected]:pipobscure/fsevents Warning: Permanently added the RSA host key for IP address '192.30.252.131' to the list of known hosts. npm ERR! git clone [email protected]:pipobscure/fsevents Permission denied (publickey). npm ERR! git clone [email protected]:pipobscure/fsevents fatal: Could not read from remote repository. npm ERR! git clone [email protected]:pipobscure/fsevents npm ERR! git clone [email protected]:pipobscure/fsevents Please make sure you have the correct access rights npm ERR! git clone [email protected]:pipobscure/fsevents and the repository exists. npm WARN optional dep failed, continuing fsevents@pipobscure/fsevents#7dcdf9fa3f8956610fd6f69f72c67bace2de7138 bower angular-ui-router#~0.2 progress received 1.1MB of 1.4MB downloaded, 80% bower font-awesome#~4.0 progress received 0.9MB of 1.8MB downloaded, 50%

Does not seem to work after this. I also tried sudo yo cg-angular, but the same. I create the directory manually, but then it needs the next one with same error.

Thanks
Des

partial creating with error in url breaks generator/app

When doing "yo cg-angular:partial myPartial" when you get prompted for the url, if you type /myPartial\ it completely breaks everything because the \ escapes the single quote in the templateUrl call in app.js

Should have an error check to let you know that the route url is invalid before inserting.

Sass and Bootstrap-sass support

Hi, thanks for your great work. I'm interested if you are planning to add "sass", "bootstrap-sass" optional modes in the nearest future.

yo cg-angular:controller my-controller

I think there should be a cg-angular:controller out of the box.....

Put app files in an /app dir?

It would be great if everything non configuration could be put in an app directory. I've seen other generators do this and it keeps the top level directory cleaner. So for example..... /app/search/... and /app/img. Also, an option to not have to use less for css would be nice.

Load time during development long due to less files

I really like this generator, but having trouble during development. If I do a build then the load time for my page is great since the js and css files are merged.

However, while I am developing I use the "grunt serve" and watch to reload. Even the initial index.html takes 15+ seconds to load because it is fetching close to 70 files each time.

Is there some way to get around this issue during development?

Deviation from Google Guidelines Naming Conventions

I am wondering why the template file names for controllers, directives, filters, services and unit tests do not match the Google guidelines.

• Controllers, Directives, Services, and Filters, should include controller, directive, service, and filter in their name.
• Unit tests should be named ending in _test.js, hence "foo-controller_test.js" and "bar-directive_test.js"

Is LESS optional?

Is it possible to turn off somewhere in settings usage of LESS? I use TWBS customisation and I have just ready to use CSS files from designer. I can't find in documentation any words about using CSS (concatenation, minification) instead of LESS.

Coffee options?

Would you be interested in a pull request that added Coffeescript templates, and install generator options to choose them?

Favicon being removed from <head> during build

I adding a favicon to the <head> of index.html. Unfortunately it is being removed on grunt build.

Transition to Gulp?

Are there any plans to port this over in the near future?

grunt build issues

Although grunt build works, the distribution created in the dist folder seems to have a few issues that I cannot wrap my head around.

Firstly, it is not able to find partials. After looking at the building pipeline, I notice that the html partials should have been made into ng-templates using the grunt module. Also, upon close inspection with a breakpoint, I notice that my angular.js file throws the an error along the lines of 'ngLocale module not found'.

None of these issues actually happen when I just run grunt serve on the non production version.

Any clues?

Update: I am using the latest version - [email protected]

Update II: Adding some pictures to really narrow down on the issue.

DEV: 404 error on glyphicons-halflings-regular.woff

After grunt build the CSS file tries to find glyphicons-halflings-regular.woff in fonts/ instead of in bower_components/. I am therefore getting a 404 error
GET http://localhost:9001/fonts/glyphicons-halflings-regular.woff 404 (Not Found)

See similar issue: See yeoman/generator-angular#665

Rename directory defaults

in index.js
this.config.set('partialDirectory','partial/');
this.config.set('directiveDirectory','directive/');
this.config.set('filterDirectory','filter/');
this.config.set('serviceDirectory','service/');

I would like to suggest that plurals would be more appropriate. I find myself changing .yo-rc.json every time I create a new project.

"partialDirectory": "partials/",
"directiveDirectory": "directives/",
"filterDirectory": "filters/",
"serviceDirectory": "services/",

Is there a plan to add continuous testing?

I like my unit tests to run whenever I save a file (for the changed file only, if there are any tests). This is particularly handy when following TDD. Is there any plan to add this feature?

windows directory seperator

when i create a new module, it adds a backslash ("") rather than a forward slash to the index.html, and all the .less file. This is causing issues because it's being interpreted as an escape character.

Add BrowserSync Support

BrowserSync is a cool way to open up the app across various devices. You can read the detailed documentation here

You can also check how I've implemented BrowserSync in my generator

Remove/Rename -- Feature Request

It would be really useful for there to be a command to be able to remove and rename a partials/modules/directives etc...

For example:
yo cg-angular:module my-module --delete

Introduce option to set the base app directory

This isn't quite the same as #28, but I run various applications with a directory structure that looks like:

config.file
bower.json
composer
otherconfig
Gruntfile.js
etc.
|--public
|--other_library
|--etc.

I'd love to run yo and grunt from the root of the directory, but be able to place all of the bower_components, javascript, and app stuff in the public directory. For now, I can cd to public and run everything, but having that option would be more convenient.

AngularJS generators compared

Hi group,

I want to help.

But I'm an AngularJS newcomer. That being the case, I am making this comparison of AngularJS generators of which generator-cg-angular is part, and I welcome your corrections, additions and feedback.

I don't think anyone has done this before, but if you know otherwise, please let me know.

My goals of this research are to:

1. Educate people about what can go into an app with AngularJS
2. Help expedite the convergence of best practices
3. Reduce time spent in duplicating features without knowledge of prior art

I hope you find this helpful.

Best regards,
Dan

Why do the unit tests live in their own directory?

For modularity's sake I think putting tests along with what they test (directive, partial, filter etc...) is better because then these components are truly drop ins. Furthermore you don't have to jump directories so much, everything is in one place.

Make grunt-contrib-imagemin optional

grunt-contrib-imagemin is a complete wreck in a windows environment. To get cg-angular to work in windows (unless there is some other way I don't know) I have to remove grunt-contrib-imagemin from the app. Otherwise something as trivial as git branch new_branch / git checkout new_branch utterly fails because of the 260 character limit in windows paths.

grunt-karma is equally challenging but many times it can be overcome with a very shore path name to your project like c:\myProj\

removing grunt-contrib-imagemin in windows requires manual removal of heavily nested node modules, then altering Gruntfile.js to remove imagemin tasks.

So I suggest adding this to a prompt like angular ui router and placing a note (not recommended for windows)

I know, this is lame... but it is VERY painful in windows/git