Creating new AngularJS component with Yeoman generator-ionic


#1

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?


#2

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…


#3

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!


#4

@sakotturi

$ 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 topics

#5

Currently the ionic cli does not have this functionality


#6

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


#7

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