# How to create and test a QR code scanner in ionic framework?

**URL:** <https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482>\
**Category:** cordova\
**Created:** [February 11, 2016, 7:50pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482 "2016-02-11T19:50:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![prashantvictory](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/prashantvictory/32/96763_2.png) [@prashantvictory](https://forum.ionicframework.com/u/prashantvictory)\
**Post date:** [February 11, 2016, 7:50pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/1 "2016-02-11T19:50:44Z")

</div>

Hi, I am very new to ionic, and want to create a QR code scanner app.

I want a button Scan and on click of it it should start the camera and scan any valid QR code, and then if it is valid and has data then alert it.

I tried to follow many example on web, but not any single one worked, or maybe I didn’t do it properly. I followed this example but when I run this app, it shows “Scan” button but on click on it, nothing happens. Is it because I am running it in my mac osx?

Can anyone please supply me step by step guide for this? Please help!

---

<div class="post-metadata">

**Author:** ![jesst446](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jesst446](https://forum.ionicframework.com/u/jesst446)\
**Post date:** [February 11, 2016, 9:04pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/2 "2016-02-11T21:04:39Z")

</div>

im just working on something similar I can give you a hand with it once ive got my finished and working if you like?

---

<div class="post-metadata">

**Author:** ![prashantvictory](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/prashantvictory/32/96763_2.png) [@prashantvictory](https://forum.ionicframework.com/u/prashantvictory)\
**Post date:** [February 12, 2016, 4:36am UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/3 "2016-02-12T04:36:59Z")

</div>

Hi yes please help me if possible, guide me how to do this. As I googled a lot but no clear instructions on this anywhere.

---

<div class="post-metadata">

**Author:** ![coreelements](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@coreelements](https://forum.ionicframework.com/u/coreelements)\
**Post date:** [February 12, 2016, 12:07pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/4 "2016-02-12T12:07:24Z")

</div>

so have you tried

[http://ngcordova.com/docs/plugins/barcodeScanner/](http://ngcordova.com/docs/plugins/barcodeScanner/)

---

<div class="post-metadata">

**Author:** ![prashantvictory](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/prashantvictory/32/96763_2.png) [@prashantvictory](https://forum.ionicframework.com/u/prashantvictory)\
**Post date:** [February 12, 2016, 12:29pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/5 "2016-02-12T12:29:41Z")

</div>

But it says that is for “phonegap” and I don’t know how to convert it to anuglar/ionic code?

---

<div class="post-metadata">

**Author:** ![coreelements](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@coreelements](https://forum.ionicframework.com/u/coreelements)\
**Post date:** [February 12, 2016, 12:35pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/6 "2016-02-12T12:35:39Z")

</div>

ngcordova is a cordova wrapper for AngularJS … Ionic uses AngularJS

---

<div class="post-metadata">

**Author:** ![prashantvictory](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/prashantvictory/32/96763_2.png) [@prashantvictory](https://forum.ionicframework.com/u/prashantvictory)\
**Post date:** [February 12, 2016, 12:52pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/7 "2016-02-12T12:52:04Z")

</div>

OK, then why iconic adds cordova.js and not ngcordova.js in there starter app?

---

<div class="post-metadata">

**Author:** ![coreelements](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@coreelements](https://forum.ionicframework.com/u/coreelements)\
**Post date:** [February 12, 2016, 12:57pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/8 "2016-02-12T12:57:19Z")

</div>

dunno 🙂

```
Cordova with the power of AngularJS

	ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova
		mobile apps with AngularJS. 

```

ngcordova is your friend 🙂

---

<div class="post-metadata">

**Author:** ![teaser5001](https://avatars.discourse-cdn.com/v4/letter/t/ce7236/32.png) [@teaser5001](https://forum.ionicframework.com/u/teaser5001)\
**Post date:** [August 1, 2016, 1:07pm UTC](https://forum.ionicframework.com/t/how-to-create-and-test-a-qr-code-scanner-in-ionic-framework/43482/9 "2016-08-01T13:07:37Z")

</div>

Ngcordova can also be added and injected as a dependency in the module have all its services available to u