After generating a new ionic app using Yeoman generator-ionic, I can’t create a new AngularJS component (controller / route / directive etc’).
I’ve tried yo generator-ionic:controller myController with no luck. Couldn’t find anything in the docs too.
Q: what is the right way scaffolding new component?
Note that the generator is not an official generator, as we have our own build and CLI set up.
You may have the better luck posting this on the generators repo page…
Just curious if the Ionic CLI has this kind of functionality under the hood and I just can’t it in the documentation.
Ideally I could ionic add service myService and this would either append a .service method to my services.js file or perhaps create a new myService.js file, include it in my index.html and inject it into my app dependency list.
similarly:
ionic add controller myController
ionic add route myRoute //which might add a state, route, ctrl and template...?
ionic add factory myFactory
Thanks!
$ ionic --help
_ _
(_) (_)
_ ___ _ __ _ ___
| |/ _ \| '_ \| |/ __|
| | (_) | | | | | (__
|_|\___/|_| |_|_|\___| CLI v1.6.1
=======================
start [options] <PATH> [template] ......... Starts a new Ionic project in the specified PATH
[options] any flags for the command
<PATH> directory for the new project
[template] Template name, ex: tabs, sidemenu, blank
Codepen url, ex: http://codepen.io/ionic/pen/odqCz
Defaults to Ionic "tabs" starter template
[--appname|-a] ..................... Human readable name for the app (Use quotes around the name)
[--id|-i] .......................... Package name for <widget id> config, ex: com.mycompany.myapp
[--no-cordova|-w] .................. Create a basic structure without Cordova requirements
[--sass|-s] ........................ Setup the project to use Sass CSS precompiling
[--list|-l] ........................ List starter templates available
[--io-app-id] ...................... The Ionic.io app ID to use
[--template|-t] .................... Project starter template
serve [options] ........................... Start a local development server for app dev/testing
[--consolelogs|-c] ................. Print app console logs to Ionic CLI
[--serverlogs|-s] .................. Print dev server logs to Ionic CLI
[--port|-p] ........................ Dev server HTTP port (8100 default)
[--livereload-port|-r] ............. Live Reload port (35729 default)
[--nobrowser|-b] ................... Disable launching a browser
[--nolivereload|-d] ................ Do not start live reload
[--noproxy|-x] ..................... Do not add proxies
[--address] ........................ Use specific address or return with failure
[--all|-a] ......................... Have the server listen on all addresses (0.0.0.0)
[--browser|-w] ..................... Specifies the browser to use (safari, firefox, chrome)
[--browseroption|-o] ............... Specifies a path to open to (/#/tab/dash)
[--lab|-l] ......................... Test your apps on multiple screen sizes and platform types
[--nogulp] ......................... Disable running gulp during serve
[--platform|-t] .................... Start serve with a specific platform (ios/android)
platform [options] <PLATFORM> ............. Add platform target for building an Ionic app
[--noresources|-r] .............. Do not add default Ionic icons and splash screen resources
[--nosave|-e] ................... Do not save the platform to the package.json file
run [options] <PLATFORM> .................. Run an Ionic project on a connected device
[--livereload|-l] .................... Live reload app dev files from the device (beta)
[--port|-p] .......................... Dev server HTTP port (8100 default, livereload req.)
[--livereload-port|-r] ............... Live Reload port (35729 default, livereload req.)
[--consolelogs|-c] ................... Print app console logs to Ionic CLI (livereload req.)
[--serverlogs|-s] .................... Print dev server logs to Ionic CLI (livereload req.)
[--debug|--release] ..................
[--device|--emulator|--target=FOO]
emulate [options] <PLATFORM> .............. Emulate an Ionic project on a simulator or emulator
[--livereload|-l] ................ Live reload app dev files from the device (beta)
[--port|-p] ...................... Dev server HTTP port (8100 default, livereload req.)
[--livereload-port|-r] ........... Live Reload port (35729 default, livereload req.)
[--consolelogs|-c] ............... Print app console logs to Ionic CLI (livereload req.)
[--serverlogs|-s] ................ Print dev server logs to Ionic CLI (livereload req.)
[--debug|--release] ..............
[--device|--emulator|--target=FOO]
build [options] <PLATFORM> ................ Locally build an Ionic project for a given platform
[--nohooks|-n] ..................... Do not add default Ionic hooks for Cordova
plugin add [options] <SPEC> ............... Add a Cordova plugin
<SPEC> Can be a plugin ID, a local path, or a git URL.
[--searchpath <directory>] ........ When looking up plugins by ID, look in this directory
and subdirectories first for the plugin before
looking it up in the registry.
[--nosave|-e] ..................... Do not save the plugin to the package.json file
resources ................................. Automatically create icon and splash screen resources (beta)
Put your images in the ./resources directory, named splash or icon.
Accepted file types are .png, .ai, and .psd.
Icons should be 192x192 px without rounded corners.
Splashscreens should be 2208x2208 px, with the image centered in the middle.
[--icon|-i] .................... Generate icon resources
[--splash|-s] .................. Generate splash screen resources
upload .................................... Upload an app to your Ionic account
[--email|-e] ...................... Ionic account email
[--password|-p] ................... Ionic account password
[--note] .......................... The note to signify the upload
share <EMAIL> ............................. Share an app with a client, co-worker, friend, or customer
<EMAIL> The email to share the app with
lib [options] [update] .................... Gets Ionic library version or updates the Ionic library
[update] Updates the Ionic Framework in www/lib/ionic
[--version|-v] ....................... Specific Ionic version
Otherwise it defaults to the latest version
setup [sass] .............................. Configure the project with a build tool (beta)
[sass] Setup the project to use Sass CSS precompiling
push ...................................... Upload APNS and GCM credentials to Ionic Push (alpha)
[--ios-dev-cert] .................... Upload your development .p12 file to Ionic Push
[--ios-prod-cert] ................... Upload your production .p12 file to Ionic Push
[--production-mode=y,n] ............. Tell Ionic Push to use production (y) or sandbox (n) APNS servers
[--google-api-key <your-gcm-api-key>] Set your app's GCM API key on Ionic Push
browser <command> [browser] ............... Add another browser for a platform (beta)
<command> "add remove rm info versions upgrade list ls revert"
[browser] The browser you wish to add or remove (Crosswalk)
[--nosave|-n] .................... Do not save the platforms and plugins to the package.json file
service add [options] <SPEC> .............. Add an Ionic service package and install any required plugins
<SPEC> Can be a service name or a git url
add [name] ................................ Add an Ion, bower component, or addon to the project
[name] The name of the ion, bower component, or addon you wish to install
remove [name] ............................. Remove an Ion, bower component, or addon from the project
[name] The name of the Ion, bower component, or addon you wish to remove
list ...................................... List Ions, bower components, or addons in the project
ions ...................................... List available ions to add to your project
templates ................................. List available Ionic starter templates
info ...................................... List information about the users runtime environment
help [command] ............................ Provides help for a certain command
[command] The command you desire help with
link [appId] .............................. Sets your Ionic App ID for your project
[appId] The app ID you wish to set for this project
[--reset|-r] ........................ This will reset the Ionic App ID
hooks [add|remove|permissions|perm] ....... Manage your Ionic Cordova hooks
[add|remove|permissions|perm] Add, remove, or modify permissions on the default Ionic Cordova hooks
state <COMMAND> ........................... Saves or restores state of your Ionic Application using the package.json file
<COMMAND> [ save | restore | clear | reset ]
[save] ............................. Save the platforms and plugins into package.json
[restore] .......................... Restore the platforms and plugins from package.json
[clear] ............................ Clear the package.json of cordovaPlugins and cordovaPlatforms, as well as clear out the platforms and plugins folders
[reset] ............................ Clear out the platforms and plugins directories, and reinstall plugins and platforms
[--plugins] ........................ Only do operations with plugins
[--platforms] ...................... Only do operations with platforms
docs <TOPIC> .............................. Opens up the documentation for Ionic
<TOPIC> the topic to view help documentation for. Use "ls" to view all topicsCurrently the ionic cli does not have this functionality
Thanks @mhartington for the clear & concise reply. Any thoughts on whether some sort of this advanced tooling is on the horizon in the Ionic CLI?
I’m about to start working on a larger Ionic project and we’re looking to adopt some of Google’s recommended angular structure:
sampleapp/
app.css
app.js
app-controller.js
app-controller_test.js
components/
bar/ "bar" describes what the service does
bar.js
bar-service.js
bar-service_test.js
bar-partial.html
foo/ "foo" describes what the directive does
foo.js
foo-directive.js
foo-directive_test.js
foo-partial.html
index.html
from: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
ideally bar/ and foo/ could be generated using ionic component generate foo [bar]
each component would register its dependencies and then only the component would have to be injected into the app module.
I havent written a yeoman generator before but maybe its worth playing around with
I look for the same feature project structure, btw it would be great to have it with jade instead of ugly html. So is there any solution out of box that solve this? What I found so far is only this https://github.com/jtomaszewski/ionic-cordova-gulp-seed