{"id":15450636,"url":"https://github.com/leob/ionic-quickstarter","last_synced_at":"2025-06-24T21:36:44.304Z","repository":{"id":35809132,"uuid":"40091451","full_name":"leob/ionic-quickstarter","owner":"leob","description":"Quickstarter app for Ionic","archived":false,"fork":false,"pushed_at":"2016-11-10T11:04:35.000Z","size":645,"stargazers_count":78,"open_issues_count":4,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-20T00:36:32.987Z","etag":null,"topics":["ionic","javascript"],"latest_commit_sha":null,"homepage":null,"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/leob.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-08-02T20:11:45.000Z","updated_at":"2024-03-13T20:28:32.000Z","dependencies_parsed_at":"2022-09-05T06:11:24.726Z","dependency_job_id":null,"html_url":"https://github.com/leob/ionic-quickstarter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leob/ionic-quickstarter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leob%2Fionic-quickstarter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leob%2Fionic-quickstarter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leob%2Fionic-quickstarter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leob%2Fionic-quickstarter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leob","download_url":"https://codeload.github.com/leob/ionic-quickstarter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leob%2Fionic-quickstarter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261760018,"owners_count":23205649,"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":["ionic","javascript"],"created_at":"2024-10-01T21:07:09.280Z","updated_at":"2025-06-24T21:36:44.272Z","avatar_url":"https://github.com/leob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic Quickstarter\n\n### A boilerplate and Reference app providing tools and best practices to kickstart your app development\n\nFor background, read my\n\u003ca href=\"http://codepen.io/leob6/blog/ionic-quickstarter-a-starter-app-to-kickstart-your-app-development\" target=\"_blank\"\u003e\nblog post\u003c/a\u003e.\n\n## Chat\n\n[![Join the chat at https://gitter.im/leob/ionic-quickstarter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/leob/ionic-quickstarter)\n\n## Table of contents\n\n[Release notes](#release-notes)\u003cbr\u003e\n[Wiki](#wiki)\u003cbr\u003e\n[Introduction](#introduction)\u003cbr\u003e\n[Installation and usage](#installation-and-usage)\u003cbr\u003e\n[Gulp file](#gulp-file)\u003cbr\u003e\n[Project structure](#project-structure)\u003cbr\u003e\n[Contribute](#contributing)\n\n\n## RELEASE NOTES\n\nStarting with this version (released November 8, 2016), the project uses the Ionic CLI 2.x. This causes some BREAKING\nCHANGES if you try to upgrade to the new version of the quickstarter (it's not an issue of course if you start a new\nproject using the quickstarter).\n\n(the big advantage of using the Ionic 2.x CLI is that it supports not only Ionic 1 apps, e.g. the ionic-quickstarter,\nbut also Ionic 2 apps - you can switch between Ionic 1 and Ionic 2 mode with a command line parameter)\n\nThe most important difference is that the configuration file ```ionic.project``` has been renamed to\n```ionic.config.json```, and works slightly different. The quickstarter project has been modified so that it is\ncompatible with the new Ionic CLI (to do this, the ```gulp.js``` file has been modified, among others).\n\nThe project has also been upgraded to use a newer Ionic framework version (1.3.x) and Angular version (1.5.x), I've\nfixed a number of issues on iOS (improved iOS compatibility), and I've added Crosswalk for better performance and\ncompatibility on Android (note: this will make your APK approx. 20 MB bigger, but in my experience it's worth it).\n\nFor all of this to work properly, you should upgrade your ```nodejs``` and ```cordova``` versions, if you haven't\nalready. See [this](https://github.com/leob/ionic-quickstarter/wiki/Setting-up-Ionic-and-Cordova) Wiki page for\ndetails.\n\n## Wiki\n\nI've added two useful sections to the Wiki:\n\n* [Release notes](https://github.com/leob/ionic-quickstarter/wiki/Release-notes)\n* [Useful commands](https://github.com/leob/ionic-quickstarter/wiki/Useful-commands)\n\nPlease make a habit of consulting the Release Notes as these contain important info on new versions.\n\nI intend to keep this starter app up to date with the newest versions of Ionic etc, and to add features/improvements.\nSee [Todo and Roadmap](https://github.com/leob/ionic-quickstarter/wiki/Todo-and-roadmap) on the Wiki, and feel free to\n[contribute](https://github.com/leob/ionic-quickstarter/wiki/Contributing).\n\n***NOTE:*** this starter app is based on Ionic 1.3.x and Angular 1.5.x.\n\nThe upcoming new Ionic 2 release will, in all likelihood, address 80-90% of the issues which this starter app aims to\naddress (e.g. build system, SASS/styling, common Ionic 'gotchas' and so on). So, \"post-Ionic 2\" this starter (and most\nother starters) will probably lose a lot of their relevance.\n\n## Introduction\n\nIonic Quickstarter is based on the \"tabs starter\" project from Ionic, but has the following extras:\n\n* An improved gulp.js file (with a build process optimized for production, with template caching etc)\n* Improved project structure (a modular app structure suitable for bigger apps)\n* Application script files (Javascript) will be automatically included in your index.html by the gulp build process  \n* Per environment, you can define different values for constants (e.g. appKey and so on) which are then written into\n  config.js by the appropriate gulp task\n* Unit test support using Karma and Jasmine\n* Typescript Definition Files ('tsd' files) which enable autocomplete/intelli-sense features when you use an IDE such\nas WebStorm or Visual Studio\n* Signup and login flow implemented with Firebase (with the flexibility to add other implementations)\n* Support for the two main Ionic UI patterns: side menus and tabs, and a Slider integration\n* Includes some commonly used features, for instance form validation using ng-messages and improved logging\n* For easier diagnostics and troubleshooting once your app is \"out in the wild\" (running on users' devices), you can\nuse remote logging with Logentries (see description on the\n[Wiki](https://github.com/leob/ionic-quickstarter/wiki/Setting-up-remote-logging-with-Logentries))\n* Basic image support: Cordova camera, image cropping, storing images in local storage, and displaying images\n* Supports internationalization (I18N) using the \u003ca href=\"https://github.com/angular-translate/angular-translate\"\ntarget=\"_blank\"\u003eangular-translate\u003c/a\u003e library (currently only an English language file is supplied, it's easy to add\nother languages)\n* Provides workarounds for a number of well-known issues in Ionic apps (swipe to close menu, hardware back button etc)\n* Incorporates a number of 'best practices' for AngularJS and Ionic (e.g. \"Controller as\" syntax)\n* A modular SASS setup including some handy utility styles and best practices for customization of colors, fonts etc.\n* Reusable services and directives containing some commonly used utility functions that you can call in your app \n* An 'appModule' utility function that makes managing your AngularJS modules slightly easier\n* Currently based on Ionic v.1.3.x and AngularJS 1.5.x; tested on 3 devices: iPhone 4, Android smartphone, Android\ntablet\n\nThe first two topics (Project structure and Gulp file) will be explained below.\n\nTo keep this README short (it's already too long), I'm putting the rest of the information on the\n[Wiki](https://github.com/leob/ionic-quickstarter/wiki).\n\n## Installation and usage\n\nFirst, install ```nodejs```, ```cordova``` and the Ionic command line tools, as described on the \u003ca\nhref=\"http://ionicframework.com/getting-started/\" target=\"_blank\"\u003eIonic Getting Started\u003c/a\u003e page.\n\nIt is also recommended to have the following command line tools installed:\n\n```gulp``` and ```bower```\n\nCheck if these are installed, and if not install them 'globally' using ```npm``` with the \"-g\" (global) flag.\n\nSee [here](https://github.com/leob/ionic-quickstarter/wiki/Setting-up-Ionic-and-Cordova) for a detailed explanation on\nhow to install these tools.\n\n***Note:*** I have recently upgraded the Quickstarter to work with the following versions of nodejs, Ionic CLI and\nCordova, so these are the versions that I recommend because they work well together with the newer Ionic framework\nversion (1.3.x) and Cordova plugins:\n\n```\nnode v6.9.1\nnpm v3.10.8\nionic (CLI) v2.1.4\nCordova v6.4.0\n```\n\nFor details see the \"installation\" page on the Wiki\n[here](https://github.com/leob/ionic-quickstarter/wiki/Setting-up-Ionic-and-Cordova).\n\n***Tip:*** instead of locally installing all of the above tools, an alternative may be to use the\n\u003ca href=\"https://github.com/driftyco/ionic-box\" target=\"_blank\"\u003eIonic Box\u003c/a\u003e. This can be an attractive option,\nespecially for Windows users.\n\nAssuming that you have all of the above installed successfully, open a terminal and \"cd\" into the directory where you\nwant to install your app.\n\nRun the following commands (note: below the app is named ```myapp```, replace this by your app's name):\n\n\u003cpre\u003e\ngit clone https://github.com/leob/ionic-quickstarter\nmv ionic-quickstarter myapp\ncd myapp\n# Unless you want to contribute to development of ionic-quickstarter, REMOVE the Git repo now:\nrm -rf .git\n\u003c/pre\u003e\n\nIf you want to put your app under source control and you use Git, type the command:\n\n\u003cpre\u003e\ngit init\n\u003c/pre\u003e\n\n***NOTE:*** the next step (editing ionic.config.json and config.xml to change the app name) is OPTIONAL. You can skip this\nstep and do it later (or not at all), if you want. If you want to do it, then edit the following two files using a text\neditor:\n\n\u003cpre\u003e\nionic.config.json\nconfig.xml\n\u003c/pre\u003e\n\nIn these files, replace the name ```app``` with the name you want to give to your app as follows:\n\n* in ```ionic.config.json```: at line 2 (\"name\": \"app\"), replace ```app``` with your app name\n* in ```config.xml```: at line 2, replace ```com.ionicframework.app``` with your package name (e.g.\n```com.mycompany.myapp```), and at line 3 replace ```app``` with your app name\n\nFinish the installation by entering the following commands:\n\n\u003cpre\u003e\nnpm install\nbower install\nionic state restore --plugins\n\u003c/pre\u003e\n\nFinally, if you want to add Android and/or iOS as a runtime platform, type one or both of the following commands:\n\n\u003cpre\u003e\nionic platform add android\nionic platform add ios\n\u003c/pre\u003e\n\nThe project is now ready to run. To run it in a browser, type (I advise to ALWAYS use the ```-c``` option):\n\n\u003cpre\u003e\nionic serve -c\n\u003c/pre\u003e\n\nor any other variation, e.g. (using the \"labs\" feature, logging to the console, and defaulting to Chrome):\n\n\u003cpre\u003e\nionic serve -l -c --browser google-chrome\n\u003c/pre\u003e\n\nClick through the app: try the tabs, menus and so on.\n\nIf you click the menu item ```log out``` then you will be presented with the login page. In\ndevelopment mode this is a 'fake' login page. To log in, simply type an arbitrary email address (can be fake too), and\nfor the password type the text ```password```.\n\n***NOTE:*** if, after executing ```ionic serve``` you get a blank page in your browser with the message\n```Error: ENOENT: no such file or directory ... index.html``` then it indicates that the \"gulp-inject\" process wasn't\nable to create an index.html file from the index-template.html file.\n\nIn this happens, I would advise you to run \"ionic serve\" with the arguments '-l' and '-c', so:\n\n\u003cpre\u003e\nionic serve -l -c\n\u003c/pre\u003e\n\nIn some cases, the addition of \"-l\" in itself seems to be already enough to fix the problem (not sure about this).\n\nHowever if the problem remains, then look at the messages in your console (terminal) window, which were enabled through\nthe \"-c\" argument. Normally you should see an error message/stacktrace in the terminal/console which should tell you\nwhat is going wrong.\n\nOne possible cause for the above error seems to be the ```libsass bindings not found``` error which was discussed\nabove. However as said above this error **SHOULD** not occur anymore since I've upgraded the ```gulp-sass``` version.\n\n### Some notes on usage\n\nI've set up the gulp file and the starter app in such a way that there are essentially 3 distinct 'modes':\n\n* 'development' mode which is what you use when running \"ionic serve\" (running in the browser)\n* 'test' mode: used when you run 'gulp test' or 'karma start'\n* 'production' mode which is what you use with \"gulp build\" and \"ionic run\" (running on a device)\n\nAs I've currently set it up, these modes are quite different.\n\n#### Development mode\n\nIn development mode, the gulp build process is simple: no minification, concatenation etc.\n\nBy default, in development mode, the various services (signup, login etc) use a \"mock\" implementation with fake data\n(but you can easily override this through configuration parameters).\n\nTo define configuration parameters for development mode, add them to ```src/js/config/config-dev.json```.\nThe ```gulp``` build process will write these values to ```src/js/config/config.js```.\n\n#### Production mode\n\nIn production mode (used on a real device), the gulp build process does a complete build including minification,\nconcatenation etc, and the app runs with 'real' services.\n\n(e.g. the Firebase service for signup/login, but you can replace this with an implementation of your own)\n\nTo define configuration parameters for development mode, add them to ```src/js/config/config-prod.json```.\nThe ```gulp``` build process will write these values to ```src/js/config/config.js```.\n\n#### Test mode\n\nTest mode (karma/jasmine) also uses the 'lightweight' build process and 'mock' services.\n\nWe also support end-to-end (E2E) testing, see [here](https://github.com/leob/ionic-quickstarter/wiki/E2E-Testing) for\ndetails.\n\nFor more details on configuring and using development, test and production mode, see the\n[Wiki](https://github.com/leob/ionic-quickstarter/wiki).\n\n#### A note about \"ionic upload\" and the Ionic View app\n\nHere is a warning for people who use the Ionic View app in conjunction with the ```ionic upload``` command to test\ntheir app (by the way, I don't really recommend using Ionic View, see my comments about it on the Wiki).\n\nIf you do an ```ionic upload```, then by default it will take your app from the ```src``` folder, not from ```www```.\nThis is because ```ionic upload``` takes the setting from the ```ionic.config.json``` file.\n\nSo that would mean that you'd see a ***development*** build, not a ***production*** build, when viewing your app in\nIonic View.\n\nIf you don't want this (i.e. if you want a **production** build in Ionic View) then you should (temporarily) change\n```src``` to ```www``` in ```ionic.config.json```, do a ```gulp build``` and a ```ionic upload```, and then change\nionic.config.json back to ```src```.\n\nNote that the same principles apply if you want to test a **production** build under ```ionic serve``` (so not in the\nIonic View app but in a browser).\n\nHowever in this case you need to take one extra step to prevent ```ionic serve``` from overwriting your production\nbuild: you need to run ```ionic serve``` with the ```--nogulp``` argument.\n\nSo the workflow then becomes:\n\n* temporarily change ```src``` to ```www``` in ```ionic.config.json```\n* run the command: ```gulp build```\n* run the command: ```ionic serve --nogulp```\n* when you are done, change ```ionic.config.json``` back to ```src```\n\n#### A note about the usage of Firebase for authentication\n\nIn production mode (if you run on a device with ```ionic build``` or ```ionic run```) then by default Firebase.com will\nbe used for login/authentication. This is because in \"production mode\" the settings in the ```config-prod.json``` file\nare used, which set ```devMode = false``` and ```testMode = false```.\n\nThese flags, in turn, cause the user service to point to the Firebase.com implementation (see\nhttps://github.com/leob/ionic-quickstarter/blob/master/src/js/app/user/services/user.service.js to understand how this\nworks).\n\nIf you want to run in production mode but do NOT want to use Firebase.com but another implementation (for instance the\n'mock' implementation), then you can do this in two ways:\n\n* modify the values in  ```config-prod.json```: if you set ```devMode = true``` then the \"mock\" user service\nimplementation will be used\n* modify the code of https://github.com/leob/ionic-quickstarter/blob/master/src/js/app/user/services/user.service.js to\nmake it use the implementation that you want (for instance the 'mock' implementation)\n\nFor more details on configuring Firebase, see the\n[wiki](https://github.com/leob/ionic-quickstarter/wiki/Common-recipes).\n\n#### A note about using the image functionality (Cordova Camera, image cropping)\n\nThe image functionality (taking a picture, cropping a picture, and so on) only works on a device, because it needs\nCordova, and camera hardware obviously. So, you will need to use 'production mode' (that is, ```gulp build``` and\n```ionic run``` or ```ionic build```).\n\nAs explained in the previous section, in production mode authentication will use the Firebase.com implementation by\ndefault.\n\nIf you do not want this, then you can change the values in the ```config-prod.json``` file, or you can change\nthe code of https://github.com/leob/ionic-quickstarter/blob/master/src/js/app/user/services/user.service.js (see the\nexplanation above).\n\nFor more details on using the image functionality, see the\n[wiki](https://github.com/leob/ionic-quickstarter/wiki/Common-recipes).\n\n#### Adding libraries\n\nIf you want to add a Javascript library (pre-made JS component) to the app, you will need to go through the following\nfour steps.\n\n(example used below: the \"fus-messages\" component, https://github.com/fusionalliance/fus-messages)\n\n* Install it with bower, e.g: ```bower install fus-messages --save``` (this also updates your project's\n```bower.json``` file).\n* Add the library path (e.g. ```'./src/lib/fus-messages/dist/fus-messages.js'```) to your ```gulp.js``` file so that\n```gulp build``` knows how to copy the library file(s) during the build. You need to add it to the ```lib``` section of\nthe ```paths``` variable in ```gulp.js```, and normally you would choose the minified version (ending in ```.min.js```)\nof the library.\n* Add the library path to your project's ```index-template.html``` file inside a ```script``` tag, for instance:\n  ```\u003cscript src=\"lib/fus-messages/dist/fus-messages.js\"\u003e\u003c/script\u003e```\n* Finally, add the library's module name (e.g. ```fusionMessages```) to the list of your app dependencies inside the\n```app.module``` statement in your project's ```app.js``` file.\n\n#### Troubleshooting modulerr errors in a production build\n\nSometimes, after doing a production build/run (```gulp build``` followed by ```ionic build``` or ```ionic run```) you\nwill see nothing but a blank page when starting the app on your device.\n\nThe most common cause is that you have the infamous AngularJS 'modulerr' error. To debug and fix this, please consult\n[this](https://github.com/leob/ionic-quickstarter/wiki/Troubleshooting-modulerr-errors-in-a-production-build) Wiki\npage.\n\n## Gulp file\n\nThe gulp.js file supports the following commands:\n\n* ```gulp default``` and ```gulp watch```\n* ```gulp jshint```\n* ```gulp test``` and ```gulp test-single```\n* ```gulp build```\n\nHere is how you use these commands.\n\n### Gulp default and gulp watch\n\nNormally you don't run these commands manually. They will be executed automatically when you run ```ionic serve```.\nThis is done through a configuration section in the ```ionic.config.json``` file:\n\n```\n \"gulpStartupTasks\": [\n    \"default\",\n    \"watch\"\n ]\n```\n\n### Gulp jshint\n\nYou can run this to hint/lint your Javascript code. Just execute:\n\n```\ngulp jshint\n```\n\n### Gulp test and gulp test-single\n\nUse these commands to run your tests via the Karma test runner.\n\n```gulp test``` runs the tests and then keeps watching (and re-running) them until you abort the command, while\n```gulp test-single``` runs the tests only once and then exits. \n\n### Gulp build\n\nYou use this command to generate a production build to run on a real device. Invoke it like this:\n\n```\ngulp build\nionic run\n```\n\nReplace ```ionic run``` by ```ionic build``` if you want to perform a build instead of a run.\n\n## Project structure\n\nTo support bigger apps, the starter app is structured differently than the basic 'tabs starter app'.\n\nThe tabs starter app lumps all the route definitions and controllers in one Javascript file, and puts the html\ntemplates in a separate directory.\n\nInstead, we've chosen to organize the files on a Module basis: each Module is in its own directory containing the\nJavascript (controllers etc) and the HTML (templates) for that Module. This makes it easier to keep a large app\norganized and maintainable.\n\nAs an example, here is the default structure (slightly simplified) after installing the starter app:\n\n```\n/\n├── scss\n│   └── ionic.app.scss\n│\n├── src\n│   ├── css\n│   │      \n│   ├── img\n│   │      \n│   ├── js\n│   │   ├── app\n│   │   │   │\n│   │   │   ├── auth\n│   │   │   │   ├── forgotPassword\n│   │   │   │   │   ├── forgotPassword.html\n│   │   │   │   │   └── forgotPassword.js\n│   │   │   │   │\n│   │   │   │   ├── login\n│   │   │   │   │    ├── loggedout.html\n│   │   │   │   │    ├── login.html\n│   │   │   │   │    ├── login.ctrl.js\n│   │   │   │   │    ├── login.router.js\n│   │   │   │   │    └── logout.ctrl.js\n│   │   │   │   │\n│   │   │   │   └── signup\n│   │   │   │        ├── signup.ctrl.js\n│   │   │   │        ├── signup.html\n│   │   │   │        └── signup.router.js\n│   │   │   │    \n│   │   │   ├── user\n│   │   │   │   ├── models\n│   │   │   │   │   └── user.js\n│   │   │   │   │       \n│   │   │   │   └── services\n│   │   │   │        ├── user.service.js\n│   │   │   │        ├── mock\n│   │   │   │        │   └── user.service.mockImpl.js\n│   │   │   │        └── firebase\n│   │   │   │            └── user.service.firebaseImpl.js\n│   │   │   │      \n│   │   │   app.js\n│   │   │   \n│   │   ├── config\n│   │   │   ├── config-base.json\n│   │   │   ├── config-dev.json\n│   │   │   ├── config-prod.json\n│   │   │   └── config.js  [GENERATED]\n│   │   │   \n│   │   ├── modules.js\n│   │   │   \n│   │   └── templates.js\n│   │      \n│   ├─── lib\n│   │    ├── angular\n│   │    ├── ionic\n│   │    ├── ngCordova\n│   │    └── firebase\n│   │      \n│   ├ index-template.html\n│   └ index.html  [GENERATED]\n│         \n└── www\n```\n\nThe structure shown above is slightly simplified, but the idea is as follows.\n\n### Separate \"src\" and \"www\" directories\n\nThe app's sources (Javascript, HTML, CSS) sit under ```src``` instead of under the default location ```www```.\n\nThis is different than a 'standard' Ionic app, the reason is because of how the build process works.\n\nDuring a production build (```gulp build```), the sources (under ```src```) are minified and concatenated and so on and\nthe products (build artifacts, the minified/concatenated files) are then placed in the ```www``` directory, where\nCordova (through the ```ionic run``` or ```ionic build``` process) will pick them up.\n\nThis setup keeps the sources under ```src``` cleanly separated from the build artifacts under ```www```.\n\n### Modules\n\nGeneral principle: ONE DIRECTORY == ONE MODULE (and one subdirectory == 1 sub module).\n\nSo you can remove a module by removing that directory (but then you still need to remove the module reference from\napp.js - the script include in index.html will be removed automatically by the build process).\n\nExample: in the structure shown above you can see two Modules: 'app.auth' and 'app.user'.\n\n'app.auth' has 3 sub modules: 'app.auth.login', 'app.auth.signup' and 'app.auth.forgotPassword'.\n\n'app.user' does not have sub modules.\n\nEach (sub)module is an AngularJS module ('angular.module(...')), and each module is in its own directory containing all\nof the Javascript and HTML files making up that module.\n\nIn the example of the 'forgotPassword' module, you see that the directory contains 2 files: a template file\n(forgotPassword.html) and a Javascript file (forgotPassword.js). The Javascript file contains the route definition\n(UI-router $stateProvider) and the controller definition.\n\nIn the example of the 'login' module you see that the directory contains 5 files: 2 template files (login.html and\nloggedOut.html) and 3 Javascript files. In this case you see that we've put the route definitions into a separate file\n(login.router.js) and each of the two controllers also in separate files.\n\nWhether or not to put the route definitions and controllers in one Javascript file or in separate files is up to you\nand will probably depend on the complexity of the code ('forgotPassword' is simple enough for all the Javascript code\nto be put into one file).\n\nThe 'app.user' module is a module that doesn't define controllers, routes or templates; it only contains services (and\nmodels). However, it is perfectly possible (and often logical) to have a module that contains everything: controllers,\nroutes, templates, services and so on. An example of this is the 'app.mainPage' module (not shown above).\n\nNote that during the production build process all of the separate files (Javascript and HTML) will be minified and\nconcatenated into one Javascript file for efficiency reasons.\n\n**Note:** apart from the directory structure (the 1 directory == 1 module principle), we've also introduced a file\nnaming convention.\n\nFor instance:\n\nScripts defining in which controllers are defined are named 'feature.ctrl.js', where 'feature' is the name of the\nfeature, e.g. \"login\".\n\nScripts defining services are named 'feature.service.js', and their implementations (of any) are named\n'feature.service.mockImpl.js', 'feature.service.firebaseImpl.js'.\n\nThe naming scheme is probably quite intuitive, but you can find a full explanation in the Wiki:\n[Naming conventions](https://github.com/leob/ionic-quickstarter/wiki/naming-conventions).\n\n### Services and mocks\n\nServices which can be reused across modules are in a separate directory ```services```.\n\nA service (for instance the UserService) can have multiple implementations, for instance a \"mock\" implementation and a\n\"Firebase\" implementation. To illustrate, here is the code for userService.js:\n\n```\nangular.module('app.user')\n  .factory('UserService', function ($injector, APP) {\n    if (  APP.testMode) {\n      return $injector.get('UserServiceMockImpl');\n    } else {\n      return $injector.get('UserServiceFirebaseImpl');\n    }\n  });\n```\n\nDepending on \"flags\" set in the config.js (in this case, APP.testMode), the factory instantiates either a Mock\nimplementation or a Firebase implementation of the user service. These implementations are in subdirectories below the\n```service``` directory.\n\nUsing this approach, service implementations can easily be changed or swapped out without the client code (controllers\nor other services) noticing anything.\n\nThe ability to run with 'mock' implementations makes it easy to develop quickly without having to perform a complicated\nproduction setup, and in test mode, the mock implementations makes running your unit tests a lot faster of course.\n\n## Contributing\n\nContributions are welcome. For details, see the\n[Contributing](https://github.com/leob/ionic-quickstarter/wiki/Contributing) section on the Wiki.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleob%2Fionic-quickstarter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleob%2Fionic-quickstarter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleob%2Fionic-quickstarter/lists"}