ericsimons / ionic-course

"Mastering Ionic" course code and markdown

Mastering the Ionic Framework: Learn to Build & Deploy Native Speed HTML5 Based Apps

This repository contains the markdown and code for the Mastering Ionic course hosted on Thinkster.io. Pull requests are more than welcome for typos, code errors, etc :)

Getting the base project set up

Run the command npm install. Then follow the rest of the course, starting at the section "Starting our project".

If you want the source code of the final working Ionic application, make sure you have Thinkster Pro and then download it from the course page on Thinkster.

Need help?

Feel free to shoot me a tweet, or if you have Thinkster Pro, I'm also available on the Pro Slack channel for one-on-one support.

ionic-course's Issues

ionic v1.0 and cordova 5.0 compatibility during emulation

This was near impossible to figure out and only after a few hours of near fruitless googling i stumbled upon the solution by accident.

Symptoms:
You attempt to emulate Android device using AVD or genymotion.
You get:

On genymotion and actual device you get:

and no matter what you do at signup or login the http post errors out giving you
'Hmm... try another username.'

Solution:
http://forum.ionicframework.com/t/application-error-there-was-a-network-error/21999

Needs a whitelist plugin.
http://abou-kone.com/2015/04/25/ionic-there-was-a-network-error-when-running-on-genymotion/

Please include step of adding this plugin to tutorial accordingly.

Thanks

Unable to view the videos in the tutorial

In any browser.
https://thinkster.io/ionic-framework-tutorial/

Developer console shows this on click to start

[Error] Error: undefined is not a function (evaluating 'n.track("screencast shown",{pro:i.isPro,url:t.data.url},!0)')
showVideo@https://thinkster.io/scripts/app.js:4:11112
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:198:431
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.min.js:12:198
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:126:193
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:126:424
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.min.js:12:185
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:32:367
(anonyme Funktion) (angular.min.js, line 103)
(anonyme Funktion) (angular.min.js, line 77)
$apply (angular.min.js, line 126)
(anonyme Funktion) (angular-touch.min.js, line 12)
c (angular.min.js, line 32)

What is the license for this code?

There isn't any mention of it in the article or the repo.

If somebody follows this tutorial to completion and they have the app they have written what are they allowed to do with it?

Ionic Application Structure - 404 Error

Inside the
The guts of an Ionic application
heading, when you click on this post which links to the page describing the directory structure of Ionic Framework, a Page Not Found is shown.

Build failed. Cannot find module node-gyp

I'm running "npm install" in the /code folder and am getting the following build failure error:

npm install
npm WARN deprecated [email protected]: Please use gulp-clean-css
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: use node-gyp@3+ instead
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global [email protected] should be installed with -g

> [email protected] install C:\Users\Joey\Documents\dev\ionic-course\code\node_modules\node-sass
> node scripts/install.js

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/win32-x64-node-6.9/binding.node

> [email protected] postinstall C:\Users\Joey\Documents\dev\ionic-course\code\node_modules\node-sass
> node scripts/build.js

module.js:471
    throw err;
    ^

Error: Cannot find module 'C:\Users\Joey\Documents\dev\ionic-course\code\node_modules\node-sass\node_modules\pangyp\bin\node-gyp'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
Build failed

Remove extra slash in Recommendations service

Hi, I'm busy with the ionic course and I'm following along with the clone of the repository. Directly after you introduced the Recommendations service you specify the $http request URL as SERVER.url + '/recommendations', this causes the generated url to render with two slashes: https://ionic-songhop.herokuapp.com//recommendations and not return anything since heroku returns a 404. The server constant in app.js already has a trailing slash. That extra slash should be removed in the tutorial since it will confuse people who are following along.

So in the tutorial it should be:

return $http({
     method: 'GET',
     url: SERVER.url + 'recommendations'
}).success(function(data){
     // merge data into the queue
     o.queue = o.queue.concat(data);
});

But its still a great tutorial and I am enjoying it so far 😃

'node build.js' error on npm install

very early on in the tutorial, I clone this repo, navigate to /code/, and npm install. At that point, I get this error message:

"Failed at the [email protected] install script 'node build.js'"

"Tell the author that this fails on your system: node build.js"

I'm not sure what went wrong at this point. I'd like to follow along with the tutorial, but I'm stuck at this point. Help?

Missing User dependency injection in app.js

Hi Eric,

In the tutorial, the section where onEnter is defined in splash route, the User object is added like below

// splash page
  .state('splash', {
    url: '/',
    templateUrl: 'templates/splash.html',
    controller: 'SplashCtrl',
    onEnter: function($state, User){
      User.checkSession().then(function(hasSession) {
        if (hasSession) $state.go('tab.discover');
      });
    }
  })

Running this code as it causes checkSession() is undefined error as the User service in not injected in the application (atleast the tutorial doesn't point this out).

The fix, as clear from the demo application is simple -

angular.module('songhop', ['ionic', 'songhop.controllers'])
.run(function($ionicPlatform, $rootScope, $state, User) {
...

I would suggest updating the tutorial with this pointer as it can be stumbling block for beginners.

Thanks a ton for the great tutorial! 👍

Media resource could not be decoded

Other people following the tutorial might encounter a similar problem.

When I was on the chapter on "Playing and managing audio" and "Wrapping up the UI and core functionality", I arrived at problems because Firefox 38 did not load the 30 second preview. I discovered this by checking the console output on Firefox by pressing F12, and the error message was shown:

Media resource ... could not be decoded

This prevented the app from being used, whether to favorite or to skip the current song. What I did was just to move to Chromium and the song finally loaded and the sounds worked.

I'm using Firefox 38 on Ubuntu 14.04.

New Favorites counter glitch

Hello,
In

// method to reset new favorites to 0 when we click the fav tab
  $scope.enteringFavorites = function() {
    User.newFavorites = 0;
    Recommendations.haltAudio();
  }

When I hit the "Favorites" TAB ... the new favorites counter badge don't disappear right away, the number moves to the left side of the tab and then gets cleared.

Thanks.

adding songs to favourites array

I have no idea where to put this code in your tutorial to add songs to favourites array. Inside factory function or outside?
o.addSongToFavorites = function(song) {
if (!song) return false;
o.favorites.unshift(song);
}