Git Product home page Git Product logo

ionic-template's Introduction

Ionic Project Template

A straight-forward Git repository to easily set up a working Ionic project without mucking about.

Quickstart

Prerequisites

You'll need these things before you start:

  • Node.js: http://nodejs.org/
  • Ionic, Cordova, and Gulp: npm install -g cordova gulp ionic
  • (Optional) The convert command (provided by ImageMagick)

How to run your first mobile app

Before you can run the project, you need to install all the dependencies of the project:

npm install

At this time, it might be a good idea to look at the "ionic" key in the package.json file. There are configurations for what Cordova plugins to install and how to resize the app icon to all the different sizes for the mobile app. The defaults should work for now.

To test the app you can just run the normal Ionic commands:

ionic platform add ios
ionic emulate ios

As you work on the app, you'll want to put styles in scss/ionic.app.scss and keep gulp watch running to update the CSS as you make changes.

What is different?

First of all, this repo should be quick and easy to set up after cloning. One thing I noticed when creating an Ionic project from scratch was that it didn't really work very well for sharing code between developers. The default project will basically check in a lot of temporary files that shouldn't be in the repo, which will cause conflicts etc. as commits are merged.

Second of all, this repo includes a few hooks that may prove useful to you. One hook will ensure that plugins are reinstalled, as I found that changing the platforms or config.xml file would often break my plugins. Another hook will ensure that all the correctly sized icons are available for each mobile platform (currently it only does Android and iOS but it's easy to make it support more). See package.json for configuring these hooks (under the "ionic" key).

Please submit pull requests for any improvements to the template!

Making resizing work

For resizing images the hooks use ImageMagick. To see if it'll work for you, try running the convert command on your command line. If it doesn't work, you can find out how to install it on their website.

If you're on Mac OS X, you can use Homebrew which might be easier to use than Ports:

brew install imagemagick

ionic-template's People

Contributors

blixt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.