ericsimons / ionic-course Goto Github PK
View Code? Open in Web Editor NEW"Mastering Ionic" course code and markdown
Home Page: https://thinkster.io/ionic-framework-tutorial/
"Mastering Ionic" course code and markdown
Home Page: https://thinkster.io/ionic-framework-tutorial/
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
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.
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
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! ๐
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?
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 ๐
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)
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.
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?
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);
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.