Book Image

Ionic Cookbook

By : Hoc Phan
Book Image

Ionic Cookbook

By: Hoc Phan

Overview of this book

Table of Contents (18 chapters)
Ionic Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Copying examples from Ionic Codepen Demos


Sometimes it's easier to just get snippets of code from the example library. Ionic Codepen Demos (http://codepen.io/ionic/public-list/) is a great website to visit. Codepen.io is a playground (or sandbox) to demonstrate and learn web development. There are other alternatives such as plnkr.com or jsfiddle.com. It's just a developer's personal preference which one to choose.

However, all Ionic's demos are already available on Codepen, where you can experiment and clone to your own account. http://plnkr.com has an existing AngularJS boilerplate and could be used to just practice specific AngularJS areas because you can copy the link of sample code and post on Stackoverflow.com if you have questions.

How to do it…

There are several tags of interest to browse through if you want specific UI component examples:

You don't need a Codepen account to view. However, if there is a need to save a custom pen and share with others, free registration will be required.

The Ionic Codepen Demos site has more collections of demos comparing to the CLI. Some are based on a nightly build of the platform so they could be unstable to use.

There's more...

You can find the same side menu example on this site:

  1. Navigate to http://codepen.io/ionic/public-list/ from your browser.

  2. Select Tag: menus and then click on Side Menu and Navigation: Nightly.

  3. Change the layout to fit a proper mobile screen by clicking on the first icon of the layout icons row on the bottom right of the screen.