{"id":28729620,"url":"https://github.com/johannesjo/generator-modular-angular","last_synced_at":"2025-06-15T17:09:19.806Z","repository":{"id":29498701,"uuid":"33036525","full_name":"johannesjo/generator-modular-angular","owner":"johannesjo","description":"A truly modular yeoman generator for AngularJS all device apps.","archived":false,"fork":false,"pushed_at":"2017-11-03T22:27:19.000Z","size":395,"stargazers_count":21,"open_issues_count":6,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-23T17:36:01.554Z","etag":null,"topics":["angular","generator","scaffolding","yeoman"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johannesjo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-28T14:36:09.000Z","updated_at":"2023-07-04T09:48:46.000Z","dependencies_parsed_at":"2022-09-03T17:31:42.650Z","dependency_job_id":null,"html_url":"https://github.com/johannesjo/generator-modular-angular","commit_stats":null,"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"purl":"pkg:github/johannesjo/generator-modular-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fgenerator-modular-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fgenerator-modular-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fgenerator-modular-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fgenerator-modular-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johannesjo","download_url":"https://codeload.github.com/johannesjo/generator-modular-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fgenerator-modular-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260016034,"owners_count":22946319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","generator","scaffolding","yeoman"],"created_at":"2025-06-15T17:09:18.977Z","updated_at":"2025-06-15T17:09:19.796Z","avatar_url":"https://github.com/johannesjo.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/johannesjo/generator-modular-angular.svg?branch=master)](https://travis-ci.org/johannesjo/generator-modular-angular)\n[![NPM version](http://img.shields.io/npm/v/generator-moda.svg?style=flat-square)](https://npmjs.org/package/generator-moda)\n[![Coverage Status](https://coveralls.io/repos/johannesjo/generator-modular-angular/badge.svg?branch=master)](https://coveralls.io/r/johannesjo/generator-modular-angular?branch=master)\n[![Dependency Status](https://david-dm.org/johannesjo/generator-modular-angular.svg)](https://david-dm.org/johannesjo/generator-modular-angular)\n[![devDependency Status](https://david-dm.org/johannesjo/generator-modular-angular/dev-status.svg)](https://david-dm.org/johannesjo/generator-modular-angular#info=devDependencies)\n\n# generator-moda (modular angular)\n*A truly modular yeoman generator for AngularJS all device apps.*\n\n[![Yeoman](assets/yeoman.png)](http://yeoman.io/) [![Angular](assets/angular.png)](https://angularjs.org) [![Gulp](assets/gulp.png)](http://gulpjs.com/) [![libSass](assets/libsass.png)](http://libsass.org/) [![Bower](assets/bower.png)](http://bower.io/) [![Cordova](assets/cordova.png)](https://cordova.apache.org/)\n\nThis generator originated in the pure hate towards repetition. \n\nIt comes with a basic gulp setup that offers you [some useful tasks](#gulp-tasks) for development (autoinjection of all development sass and javascript files, unit-tests, e2e tests and more), for building your app (minification of everything) and for building cordova multi-platform hybrid apps. It further adds a [set of useful sub-generators](#sub-gens) (e.g.: the component generator `yo moda:d myDirective`) that creates your development and testfiles in one simple sweep. The generated files follow John Papas [angular styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md).\n\nI want this to be really good, so I would be excited to [hear about your thoughts and what possible features you might be missing](https://github.com/johannesjo/generator-modular-angular/issues). Any other kind of help is also highly appreciated :)\n\n## Getting started\nI'm assuming that you have [node](https://github.com/joyent/node) already installed in a proper way. \n\nInstall [bower](https://github.com/bower/bower) and [yeoman](http://yeoman.io/) if not done already:\n```\nnpm install -g bower yo\n```\nInstall the generator:\n```\nnpm install -g generator-moda\n```\nThen make a new directory and cd into it\n```\nmkdir my-super-modular-project \u0026\u0026 cd $_\n```\nRun it!\n```\nyo moda [app-name]\n```\nThen wait........  finally run:\n```\ngulp serve\n```\nfor development.\n\n\n## \u003ca name=\"features\"\u003e\u003c/a\u003e Features\n* **total injection**: Basically everything you create is automatically injected where it needs to be and removed when its gone. Creating a new scss-file? No problem it's in your main.scss! Deleting an unused component? It's gone from your index.html.\n* **gulp and libsass speedified**: It's amazing how much faster both are compared to their counterparts.\n* **super modular**: No more controller madness by design. \n* fully **configurable** and **extendable** - use [your own configuration](#yo-rc) and [your own templates](#custom-templates)\n*  **cordova-prepared**: [Your cordova-build](#setup-hybrid-build) is just on step away. Building multiplatform mobile apps has never been so easy.\n* and of course all the basics:\n  * livereload, sass-compilation, jshint (optional), jscs, and testing on runtime\n  * minification via `ng-annotate`, `imagemin`, `htmlmin`, `cssmin`\n  * unit-testing and end-to-end testing via karma runner\n  * pick your modules on creation (`ui.router`, `ngMaterial` or one of the base components, you name it)\n\n## Why choose this generator over another?\nWhile offering the most common features of popular angularjs-generators there are three unique selling points: \n\nThe first one is the feature of  **auto-injection**. As I said: I hate repition. And while other generators offer you also some kind of auto-injection they usually require you to use their generators for that, which also means you still need to manually change those when a file changes or is deleted. Not with `moda` you not. This feature works for bower-components, your javascript-files, your tests and also your scss-components.\n\nThe second one is the **configurability**. It's super easy to adjust everything to your liking. Don't like the templates? No problem, use your own! Don't like the the file-names produced? Just make some simple changes in the .yo-rc.json. Best of all: The changes you make can be stored on a project level, so all developers in your team (can) use the same generator output.\n\nThe third one is **the cordova integration**. While technically not stunningly complicated to do, I know many developers who shy away before building hybrid apps, as they don't know how easy it is to do. And while I like ionic and while I'm thankful for what they did for hybrid-app development, I don't like that you that your kind of limted to mobile only and that you kind of have to use their components. The latter produces comparably fat apps and leaves you a little bit lost, if something doesn't work as expected. But it's just JavaScript and CSS run in a container wrapped by cordova after all, so using bootrap or your own components should work just as fine.\n\nFinally it is safe to say that I'm really dedicated to this project. I'm an Angular and node developer for years know and I want this to be really good. I plan to spend lots of hours of my free time to improve it as the time goes on. So if you miss anything, don't like something chances are very good that I'm going to change that.\n\n## Basic concepts behind this Generator\n* What belongs together should be reflected in the file-structure. Grouping files by module is generally preferable to grouping files by type.\n* Directives are the way to go. Build components all the way. They're sexy enclosed logic and expressive. Chances are you'll reuse them and it is no problem if it is only in your current app.\n* Use controllers economically. They will be gone in Angular 2.0 and honestly - I'm not too sad about it. Use them on a page-level (if your app has something like that) to get data for your views or for very minor and very specific logic.\n\n## \u003ca name=\"gulp-tasks\"\u003e\u003c/a\u003e The gulp tasks\nAs per default the following tasks are available at your convenience:\n\n* `gulp`: The development task. Runs all the injectors on file-change, file-creation or file-deletion. Unit-tests are run in parallel, as well as the sass-compilation. \n* `gulp injectAll`: Runs all the injectors once.\n* `gulp build`: Minifies your JavaScript via ng-annotate, your css, your images and your html files and copies everything to the www-folder.  \n* `gulp test`: Runs your unit tests with the keep-alive option. \n* `gulp testSingle`: Runs your unit tests once. \n* `gulp e2e`: Runs your end to end tests once. \n\nThe mobile tasks require a little preparation described in the next section.\n\n* `gulp cordovaDev`: Symlinks your app-folder to www and runs the emulator for easy live development. \n* `gulp cordovaRun`: Symlinks your app-folder to www and runs it on your device if connected. \n\nOf course there are also all the [standard cordova commands](https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html) available as well. If you want to build a release run:\n ```\n gulp build\n cordova build android --release\n ```\n\nFor all cordova related commands there is an optional platform parameter you can use to specify the platform for the cordova task. E.g. `gulp cordovaDev --platform=android` to run the android emulator. Alternatively you can edit the config.js to change the default platform.\n\nAll tasks can be edited freely and can be found in the /tasks folder.\n\n## \u003ca name=\"sub-gens\"\u003e\u003c/a\u003e Sub-Generators\n* [moda](#moda) (aka [moda:app](#app))\n* [directive](#directive)\n* [component](#component)\n* [service](#service)\n* [factory](#factory)\n* [controller](#controller)\n* [provider](#provider)\n* [decorator](#decorator)\n* [route](#route)\n* [e2e-test](#e2e-test)\n* [page-object](#page-object)\n\nFor configuring the generators on a project-level [edit the .yo-rc.json](#yo-rc).\n\n### moda\nThe main generator. Sets up the basic boilerplate. Provides an interactive prompt to install the most common modules.\n\n### directive\nInteractively generates a directive, a test file and if you choose so a scss and html-template files.\n\n**usage:**\n```\nyo moda:d my-directive\n```\n**output:**\n```\napp/scripts/my-directive/my-directive-d.js\napp/scripts/my-directive/my-directive-d.spec.js\n\n// If you choose the template option (default:true)\napp/scripts/my-directive/my-directive-d.html\napp/scripts/my-directive/_my-directive-d.scss\n// If you choose service for the service or factory option (default:false)\napp/scripts/my-directive/my-directive-s.js\n// If you choose factory\napp/scripts/my-directive/my-directive-f.js\n```\n\nYou can also specify a path or a parent module:\n```\nyo moda:d my-directive my-path\n```\n**output:**\n```\napp/scripts/my-path/my-directive/my-directive-d.js\napp/scripts/my-path/my-directive/my-directive-d.spec.js\n```\nBy default directives are wrapped into their own folder. If you don't want that you can [edit the .yo-rc.json](#yo-rc) or specify the `--noParentFolder` flag:\n\n```\nyo moda:d my-directive my-path --noParentFolder\n```\n\n\n### component\nInteractively generates a component, a test file and if you choose so a scss and html-template files.\n\n**usage:**\n```\nyo moda:cp my-component\n```\n**output:**\n```\napp/scripts/my-component/my-component-cp.js\napp/scripts/my-component/my-component-cp.spec.js\n\n// If you choose the template option (default:true)\napp/scripts/my-component/my-component-cp.html\napp/scripts/my-component/_my-component-cp.scss\n// If you choose service for the service or factory option (default:false)\napp/scripts/my-component/my-component-s.js\n// If you choose factory\napp/scripts/my-component/my-component-f.js\n```\n\nYou can also specify a path or a parent module:\n```\nyo moda:cp my-component my-path\n```\n**output:**\n```\napp/scripts/my-path/my-component/my-component-cp.js\napp/scripts/my-path/my-component/my-component-cp.spec.js\n```\nBy default components are wrapped into their own folder. If you don't want that you can [edit the .yo-rc.json](#yo-rc) or specify the `--noParentFolder` flag:\n\n```\nyo moda:cp my-component my-path --noParentFolder\n```\n\n### controller\nCreates a controller and a test-file and template and service-files if you choose so. Although it works just fine, most of the time you probably would want to use [route](#route) or [component](#directive) instead.\n\n**usage:**\n```\nyo moda:c my-ctrl\n```\n**output:**\n```\napp/scripts/my-ctrl/my-ctrl-c.js\napp/scripts/my-ctrl/my-ctrl-c.spec.js\n\n// If you choose the template option (default:true)\napp/scripts/my-ctrl/my-ctrl-c.html\napp/scripts/my-ctrl/_my-ctrl-c.scss\n// If you choose service for the service or factory option (default:false)\napp/scripts/my-ctrl/my-ctrl-s.js\n// If you choose factory\napp/scripts/my-ctrl/my-ctrl-f.js\n```\n\nYou can also specify a path or a parent module:\n```\nyo moda:c my-ctrl my-path\n```\n**output:**\n```\napp/scripts/my-path/my-ctrl/my-ctrl-d.js\napp/scripts/my-path/my-ctrl/my-ctrl-d.spec.js\n```\nBy default controllers are wrapped into their own folder. If you don't want that you can [edit the .yo-rc.json](#yo-rc) or specify the `--noParentFolder` flag:\n\n```\nyo moda:c my-ctrl my-path --noParentFolder\n```\n\n### service\nCreates a service.\n\n**usage:**\n```\nyo moda:s my-service\n```\n**output:**\n```\napp/scripts/my-global-service-dir/my-service-s.js\napp/scripts/my-global-service-dir/my-service-s.spec.js\n```\nSetting the default global-service (and factory) directory can be done by editing the .yo-rc.json\n\nYou can specify a path or a parent module:\n```\nyo moda:s my-service my-path\n```\n**output:**\n```\napp/scripts/my-path/my-service-s.js\napp/scripts/my-path/my-service-s.spec.js\n```\n\n\n\n### factory\nCreates a factory.\n\n**usage:**\n```\nyo moda:f my-factory\n```\n**output:**\n```\napp/scripts/my-global-service-dir/my-factory-f.js\napp/scripts/my-global-service-dir/my-factory-f.spec.js\n```\nSetting the default global-service (and factory) directory can be done by editing the .yo-rc.json\n\nYou can specify a path or a parent module:\n```\nyo moda:s my-factory my-path\n```\n**output:**\n```\napp/scripts/my-path/my-factory-f.js\napp/scripts/my-path/my-factory-f.spec.js\n```\n\n### filter\nCreates a filter.\n\n**usage:**\n```\nyo moda:filter my-filter\n```\n**output:**\n```\napp/scripts/my-global-filter-dir/my-filter-filter.js\napp/scripts/my-global-filter-dir/my-filter-filter.spec.js\n```\nSetting the default global-filter directory can be done by editing the .yo-rc.json\n\nYou can specify a path or a parent module:\n```\nyo moda:s my-filter my-path\n```\n**output:**\n```\napp/scripts/my-path/my-filter-filter.js\napp/scripts/my-path/my-filter-filter.spec.js\n```\n\n### provider\nCreates a provider.\n\n**usage:**\n\n```\nyo moda:p my-provider\n```\n\n**output:**\n\n```\napp/scripts/my-global-service-dir/my-provider-p.js\napp/scripts/my-global-service-dir/my-provider-p.spec.js\n```\nSetting the default global-service (and factory) directory can be done by editing the .yo-rc.json\n\nYou can specify a path or a parent module:\n```\nyo moda:p my-provider my-path\n```\n\n**output:**\n\n```\napp/scripts/my-path/my-provider-p.js\napp/scripts/my-path/my-provider-p.spec.js\n```\n\n### decorator\nCreates a decorator.\n\n\n**usage:**\n\n```\nyo moda:decorator my-decorator\n```\n\n**output:**\n\n```\napp/scripts/my-global-service-dir/my-decorator-decorator.js\napp/scripts/my-global-service-dir/my-decorator-decorator.spec.js\n```\nSetting the default global-service directory can be done by editing the .yo-rc.json\n\nYou can specify a path or a parent module:\n```\nyo moda:decorator my-decorator my-path\n```\n\n**output:**\n\n```\napp/scripts/my-path/my-decorator-decorator.js\napp/scripts/my-path/my-decorator-decorator.spec.js\n```\n\n### route\nInteractively creates a route (state) from a state-name. Requires `ui.router` to be installed during app-creation.\n**usage:**\n\n```\nyo moda:r my-state\n```\n\n**output:**\n\n```\n// if you choose to create a controller for the route (default:true)\napp/scripts/_routes/my-state/my-state-c.js\napp/scripts/_routes/my-state/my-state-c.spec.js\n// If you choose the template option (default:true)\napp/scripts/_routes/my-state/my-state-c.html\napp/scripts/_routes/my-state/_my-state-c.scss\n// If you choose service for the service or factory option (default:false)\napp/scripts/_routes/my-state/my-state-s.js\napp/scripts/_routes/my-state/my-state-s.spec.js\n// If you choose factory\napp/scripts/_routes/my-state/my-state-f.js\napp/scripts/_routes/my-state/my-state-f.spec.js\n```\nFurthermore the state is injected into the `routes.js` if present:\n```\n.state('my-state', {\n    url: '/my-state',\n    // if you choose the controller option\n    controller: 'MyStateCtrl',\n    // if you choose the template option\n    templateUrl: 'scripts/_routes/my-state/my-state-c.html'\n})\n/* STATES-NEEDLE - DO NOT REMOVE THIS */;\n```\n\nSetting the default routes directory can be done by editing the .yo-rc.json\n\nYou can also create sub-states like this:\n```\nyo moda:r my-par-state.my-state\n```\n\n**output:**\n\n```\n// if you choose to create a controller for the route (default:true)\napp/scripts/_routes/my-par-state/my-state/my-state-c.js\napp/scripts/_routes/my-par-state/my-state/my-state-c.spec.js\n// If you choose the template option (default:true)\napp/scripts/_routes/my-par-state/my-state/my-state-c.html\napp/scripts/_routes/my-par-state/my-state/_my-state-c.scss\n// If you choose service for the service or factory option (default:false)\napp/scripts/_routes/my-par-state/my-state/my-state-s.js\napp/scripts/_routes/my-par-state/my-state/my-state-s.spec.js\n// If you choose factory\napp/scripts/_routes/my-par-state/my-state/my-state-f.js\napp/scripts/_routes/my-par-state/my-state/my-state-f.spec.js\n```\nFurthermore the state is injected into the `routes.js` if present:\n```\n.state('my-par-state.my-state', {\n    url: '/my-state',\n    // if you choose the controller option\n    controller: 'MyStateCtrl',\n    // if you choose the template option\n    templateUrl: 'scripts/_routes/my-par-state/my-state/my-state-c.html'\n})\n/* STATES-NEEDLE - DO NOT REMOVE THIS */;\n```\n\n### e2e-test \nnot implemented yet\n\n### page-object\nnot implemented yet\n\n\n## Sub-Generator Options and Parameters\n**Parameters**\n\n* `--openInEditor`  opens the created files automatically in your favorite editor (specified via .yo-rc.json)\n* `--useDefaults`     skips the dialogs and uses the defaults\n* `--skipInject`      skips running grunt inject after file creation\n* `--noParentFolder`  does prevent the creation of a wrapper directory with the component name for directives and controllers\n\n## \u003ca name=\"yo-rc\"\u003e\u003c/a\u003eUsing the .yo-rc.json for configuration\nChances are that the default settings do not match your taste. Chances are you totally dislike some of the ideas behind this generator. In those cases you always can edit the .yo-rc.json with settings more to your taste.\n \nThe default configuration looks like this:\n```\n// .yo-rc.json\n\n// appended suffix for test files\ntestSuffix: '.spec',\n\n// if your specs should succeed after creation or not\ntestPassOnDefault: true,\n\n// always use defaults, never open prompts\nalwaysSkipDialog: false,\n\n// you can set this to '' if you prefer loading your styles dynamically\nstylePrefix: '_', \n\n// command launched when using the --openInEditor flag. The command \n// looks like this \u003c%= editorCommand %\u003e file-created1.ext file-created2.ext etc.\neditorCommand: 'idea', \n\n// default style of path names, e.g. for dasherize:\n// yo moda:c MyRoute\n// =\u003e my-route-c.js\npathOutputStyle: 'dasherize',\n\n// if ui router is enabled or not. If you want to enable this option,\n// make sure you also have dirs.routes and routesFile defined\nuiRouter: false,\n\n// the file where the states get injected\nroutesFile: './app/scripts/_routes.js',\n\n// file extensions used. At the moment there are only templates \n// available for those specified per default. So don't change them\nfileExt: {\n    script: '.js',\n    tpl: '.html',\n    style: '.scss'\n},\n\n// some folders used in the creation process\ndirs: {\n    app: 'app',\n    appModules: 'scripts',\n    globalComponents: '_main',\n    routes: '_routes'\n},\n\n// here it gets interesting...\nsubGenerators: {\n    directive: {\n        suffix: '-d',\n        \n        // directory used when no file-path is specified\n        globalDir: '',\n                \n        // create a parent directory with the same name, e.g.:\n        // yo moda:d bla \n        // =\u003e bla/bla-d.js for true\n        // =\u003e bla-d.js for false\n        createDirectory: true\n    },\n    controller: {\n        suffix: '-c',\n        \n        // extensions for the name of the component, e.g:\n        // yo moda:c bla \n        // =\u003e Controller-name = 'BlaCtrl'\n        nameSuffix: 'Ctrl',\n        globalDir: '',\n        createDirectory: true,\n    },\n    component: {\n        suffix: '-cp',\n        globalDir: '',\n        createDirectory: true\n    },    \n    service: {\n        suffix: '-s',\n        globalDir: '_main/global-services'\n    },\n    factory: {\n        suffix: '-f',\n        globalDir: '_main/global-services'\n    },\n    filter: {\n        suffix: '-filter',\n        globalDir: '_main/global-filters'\n    },\n    provider: {\n        suffix: '-p',\n        globalDir: '_main/global-services'\n    },\n    decorator: {\n        suffix: '-decorator',\n        globalDir: '_main/global-services'\n    },\n    mod: {\n        // there are also prefixes available\n        prefix: '_',\n        createDirectory: true\n    }\n}\n```\n\nYou can also [use your own templates](#custom-templates)!\n\n## default file pre- and suffixes\nTo distinguish files (e.g. in your awesome file searcher) they're su- and prefixed by the following rules:\n```\n_*/             : main app directories main and route\nare prefixed to be shown on top\n_*.js           : angular module, prefixed like this to be\nloaded first by file-injection\n*.spec.js       : unit tests of all kind\n*.e2e.js        : end to end tests\n*-c.js          : controller\n*-c.html        : controller-template\n_*-c.scss        : route-specfic (usually page-level) styles\n*-d.js          : directive\n*-d.html        : directive-template\n_*-d.scss        : directive-specific (usually component-level) styles\n*-f.js          : factory\n*-s.js          : service\n*-p.js          : provider\n*-filter.js     : filter\n*-decorator.js  : decorator\n```\n\n## ./ structure\nThis is a list of files which get create by `moda:app` at the root level\n```\n.bowerrc\n.editorconfig\n.gitignore\n.jshintrc\n.travis.yml\nbower.json\nconfig.xml\ngulpfile.js\nkarma.conf.js\nkarma-e2e.conf.js\npackage.json\nREADME.md\napp/\n    index.html\n    bower_components/  // ignored\n    fonts/\n    images/\n    styles/\n        _variables.scss\n        main.scss // should not be edited manually as\n                     it is used for importing all files\n        mixins/\n        functions/\n        placeholders/\n        base/\n            _buttons.scss\n            _fonts.scss\n            _forms.scss\n            _icons.scss\n            _lists.scss\n            _page.scss\n            _tables.scss\n            _typography.scss\n    scripts/\n      _app.js\n      _app.spec.js\n      routes.js // if using ui.router\n      routes.spec.js // if using ui.router\n      _routes/ // if using ui.router\ne2e-tests/\n    po/         // page-objects\n    example.e2e.js\nnode_modules/ // ignored\ntasks/\n    build.js\n    config.js\n    cordova.js\n    deploy.js\n    dev.js\nwww/          // dist folder - ignored\n```\n \n## \u003ca name=\"setup-hybrid-build\"\u003eSetting up the hybrid build\nCompiling your app to a hybrid app requires a little bit of configuration and you need to have cordova installed. Fortunately [that is quite easy](http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface).\n\nIf everything is in place, you need to add the platforms you want to build your app on. For Android you would run:\n```\ncordova platform add android\n```\nIf you get the message  `Current working directory is not a Cordova-based project` you need to create the www-folder first (e.g.: `mkdir www` from your projects root directory). \n\nAfter that you should build your current state via `gulp build` then you can run `gulp run` or `gulp emulate` to check out your app on your device or in the emulator.\n\n## how to set up your generator to run with intellij, webstorm, phpstorm, etc\nYap, its possible. I wrote a [wiki-article](https://github.com/johannesjo/generator-modular-angular/wiki/How-to-integrate-the-generator-with-Jetbrains-products-on-Ubuntu) on how I did it on Ubuntu with IntelliJ. And for those who didn't know: There is a [video by John Lindquist](https://www.youtube.com/watch?v=KBueufmUgdw) for those of you lucky enough having no path issues with node on your machine.\n\n\n## \u003ca name=\"custom-templates\"\u003eusing your own templates\n\n### overwrite templates via .yo-rc.json\nUsing a simple syntax templates can be overwritten inside the .yo-rc.json:\n```\n// .yo-rc.json\n\"subGenerators\": {\n    \"directive\": {\n        \"tpl\": {\n            // the html file, if any for that sub-generatr\n            \"tpl\": \"\u003cdiv\u003eI love divs\u003c/div\u003e\"     \n            // the test file            \n            \"spec\": \"console.log('empty tests are the best');\"\n            // the main script file\n            // notice that all common variables are also \n            // available here\n            \"script\": \"angular.module(\u003c%= scriptAppName %\u003e).directive('\u003c%= cameledName %\u003e\u003c%= nameSuffix %\u003e',\n            \"style\": \".\u003c%=sluggedName %\u003e{color:green}\n        }\n    }\n}\n```\n### overwrite templates via `customTemplatesPath`\nIf you want to make more than some small adjustments, than you might prefer setting a custom template path.\nThe `customTemplatesPath` can be specified from the project root directory (which is determined by where the .yo-rc.json is)\n```\n\"customTemplatesPath\": \"yo-rc-templates\"\n```\nor even use a absolute path, e.g.:\n```\n\"customTemplatesPath\": \"/home/user/barney/templates-that-not-suck\"\n```\n\nIf you place a service.js and a service.spec.js in the `your-app/yo-rc-templates/`-folder. Those templates would be used, instead of default ones. If you do this make sure that [all the files](https://github.com/johannesjo/generator-modular-angular/tree/master/templates/app) of the sub-generators you want to use are present there.\n\n\n### variables available in templates\nThe templates are compiled via [underscore templates](http://underscorejs.org/#template). There are some additional variables available which might be useful to you:\n\n*  `\u003c%= cameledName %\u003e`: cameled name, e.g.: `yo moda:s test-name` would return `testName` \n*  `\u003c%= classedName %\u003e`: classed name, e.g.: `yo moda:s test-name` would return `TestName` \n*  `\u003c%= sluggedName %\u003e`: slugged name, e.g.: `yo moda:s test-name` would return `test-name` \n*  `\u003c%= dashedName %\u003e`: dashed name, e.g.: `yo moda:s test-name` would return `test-name` \n*  `\u003c%= nameSuffix %\u003e`: the suffix defined for the current template in the .yo-rc.json, e.g.: `yo moda:c test-name` would return `Ctrl` with the default config\n*  `\u003c%= svcName %\u003e`: the full name of a service created with `yo moda:c` or `yo moda:d`, e.g.: `yo moda:d test-name` would return `TestName` with the default settings. \n*  `\u003c%= scriptAppName %\u003e`: name of the app as used in the module declaration of the _app.js\n*  `\u003c%= createdFiles %\u003e`: an array with objects with the created files and the used templates by the current sub-generator\n\nIn addition you can use basically all variables set in the .yo-rc.json. If you want to define your own ones it is smart to use a specific property for that, e.g.\n```\n// .yo-rc.json\n{\n    // basic config vars\n    // ...\n    \"yourVariables\": {\n        \"someVar\": \"someVal\",\n        \"someOtherVar\": \"someVal\",\n    }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannesjo%2Fgenerator-modular-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohannesjo%2Fgenerator-modular-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannesjo%2Fgenerator-modular-angular/lists"}