The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

ionic-super-starter-banner-2

When we launched Ionic 1, we provided a set of basic templates that helped developers get up and running with common mobile app layouts, such as tabs and side menu.

While Ionic developers enjoyed these templates, in many cases we felt like we weren’t doing enough to share best practices or to help developers get started faster with pre-built pages for common mobile UI designs.

Today we are releasing the first test version of the Ionic Super Starter, a starter project for new Ionic 2.x apps that comes with over 14 ready to use page designs for common mobile designs like master detail, login/signup, settings, tutorials, and more.

phones

Additionally, we have some stub providers for common utilities like Users, Settings, Apis, and more, and the entire starter comes with i18n baked right in, thanks to ng2-translate.

This is the most elaborate starter project we’ve ever built, and we need your help testing it to see if we’ve provided the right defaults and layouts for your app. The goal we’re aiming at is for an Ionic developer to be able to come in and build a serious app 10 times faster than before.

To test this starter out, install the latest version of the CLI and run:

ionic start myapp super --v2

Please take a look at the README for more info, and let us know what you think about the new starter by filing an issue on the repo for the project: https://github.com/driftyco/ionic-starter-super

Note: this is a preview release and will be evolving over the next several weeks/months.

  • http://www.sprypixels.com Dayo

    Thanks for this!!!!! I have 100% always use “tabs”, “sidemenu” options when creating a new ionic project.

  • https://adventures.firebaseapp.com Juarez Filho

    Just in time for the holidays 🎄🎅🏻📲

    • http://nicholls.azurewebsites.net/ Juan David Nicholls

      hahaha yes!

  • http://www.VisitAnyPlace.com/ Miguel Carrasco Q.

    Great Ionic Team!!!

    This work for me:

    $ sudo ionic start mySuperApp https://github.com/driftyco/ionic-starter-super –v2

    Then an error comes:
    typescript: src/app/app.component.ts, line: 62
    Cannot find name ‘TranslateService’.

    fix with:
    $ sudo npm install ng2-translate

    • yesimahuman

      You need to run the latest CLI and this will be installed automatically

  • http://www.badpenguin.org/ Antonio Gallo

    nice start: Typescript Error Cannot find name ‘TranslateService’.
    missing: npm install ng2-translate

    • yesimahuman

      Install the latest CLI and this will be installed automatically

      • http://www.badpenguin.org/ Antonio Gallo

        well i updated to rc4 a few days ago

      • http://www.badpenguin.org/ Antonio Gallo

        ok something wrong with the CLI, i had the latest version, cleaned up node_modules and now its working

  • http://www.badpenguin.org/ Antonio Gallo

    ionic -v should return at least 2.1.18 or you’ll get errors

    • ianholden123

      How can I update my CLI to the latest?

      • http://www.badpenguin.org/ Antonio Gallo

        more or less: sudo npm install -g ionic
        i suggest to study how to install it without sudo for your system and/or using a custom global directory inside your home (at least on linux)

  • Matt

    I’m scared to look because I might realize how wrong I’ve been doing things :/

  • https://github.com/stefanhuber Stefan Huber

    How can i run unit or functional tests?

  • http://gplus.to/rjv Roger V

    I had some issues updating the CLI through NPM on Windows 10. Completely uninstalling the previous version first (npm uninstall -g ionic) and then reinstalling the latest seemed to do the trick.

  • Stan Bordeaux

    Hi
    Just installed looks good but still new to v2. Is there a proper tutorial for this or just the basic README?? I only get the list page and don’t know where/how to add the other pages?? Any help appreciated

  • 翁锦程

    Great Ionic team

  • eongoo

    赞~👍

  • http://nicholls.azurewebsites.net/ Juan David Nicholls

    Example isn’t another way to teach, it is the only way to teach 🙂

  • http://www.codingandclimbing.co.uk Dave

    Does anyone at Ionic plan on doing a quick writeup of rc4 plus instructions to update existing projects (as has been the case with prior releases)? I’m reticent to update my project without clear instruction. Thanks.

  • N4vros

    Good initiative but there are some important elements missing.

    You should create :

    A real authentification system (not only the view) with page limitation and menu restriction with rights and navigation restrictions.

    Http async query with angular and another with a native http async query (wich not stop when phone screen is off or app is in background (ios and android)).

    Upload/Download pictures/videos/documents and save them in public/private device storage.

    Select pictures/videos/documents and display them in the page (via html or native component).

    Improve translation example with default user system language, default language if user system language is not supported in the available languages and settings to allow user to change the app language.

    Log system crash, non fatal error, log and send them to a server when network is available (log queue).

    Background sync/task (push notification or other solutions) (available at least on ios and android).

    App structure in order to detect network state (online/offline).

    Unit tests and functional tests.

    Database usage example in order to save articles and display them (with structure example in order to avoid queries in controller).

  • Dariusz Olsz

    Hello, why I get:
    (of course my cli is 2.1.18)

    Error with start Error: No starter template named “super”
    at Object.Start.fetchIonicStarter (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:491:13)
    at Object.Start.fetchSeed (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:247:16)
    at C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:98:18
    at _fulfilled (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:787:54)
    at self.promiseDispatch.done (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:816:30)
    at Promise.promise.promiseDispatch (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:749:13)
    at C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:557:44
    at flush (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:108:17)
    at nextTickCallbackWith0Args (node.js:415:9)
    at process._tickCallback (node.js:344:13)
    Error Initializing app: Error: No starter template named “super”
    Error: No starter template named “super”
    at Object.Start.fetchIonicStarter (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:491:13)
    at Object.Start.fetchSeed (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:247:16)
    at C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesionic-app-liblibstart.js:98:18
    at _fulfilled (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:787:54)
    at self.promiseDispatch.done (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:816:30)
    at Promise.promise.promiseDispatch (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:749:13)
    at C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:557:44
    at flush (C:UsersDarekAppDataRoamingnpmnode_modulesionicnode_modulesqq.js:108:17)
    at nextTickCallbackWith0Args (node.js:415:9)
    at process._tickCallback (node.js:344:13)

  • Ashok Kumar

    Great ionic team! By the way i found http://framework7.io/ is much better in terms of performance and look than @Ionicframework

    • Mujib Bahadiri

      In terms of community support I think ionic is far more superior since it’s using Angularjs 1/2 which is widely adopted framework.
      But in terms of number of components, I agree. Framework7 has a lot of great components that I would LOVE to see them coming to ionic2 like the DatePicker/Calendar

  • Borja Rodríguez

    Great starter! Thanks ionic team!

    Newbie question. Why to use use ng2-translate instead of the native Angular2 translations? ( https://angular.io/docs/ts/latest/cookbook/i18n.html )

  • laser

    Cool, but yet two things are missing:
    1. Splash screen (not white page after short time splash + spinner)
    2. Full screen app, with transparent statusbar background. Where menu opens under the statusbar. See, google gmail app or any other good app =)