GET 404 (Not Found) - angular js link routing

Question

I am using Ionic and Angular to create a simple application. I am running locally using Ionics ionic serve command to set up a simple server.

this is my playlist.html code, where i'll be displaying my video:

<video ng-src="{{playlist.video}}" width="560" height="315"></video>

this is my controller.js which passes the url to playlist.html:

controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlistSet = [
    [
      { track: 'Iris', artist: 'Sleeping with the Sirens', video: 'www.youtube.com/watch?v=cyOqIKGbYkg'}
     
    ]
  $scope.id = $stateParams.playlistId;});

When I run the playlist, the video doesnt appear. It gives me the error:

Cannot GET /www.youtube.com/watch?v=QBmTGlUmgpg

I have searched for the reason behind this error for the last couple hours unable to solve it. Hopefully someone has experienced the same issue and is able to help with a remedy.

If you want to play a video then the URL should point to a video, not to a web page. — a better oliver, Mar 16 '16 at 18:41

score 0 · Answer 1 · answered Mar 16 '16 at 17:00

0

I see one strange thing

$scope.playlistSet = [
    [
      { track: 'Iris', artist: 'Sleeping with the Sirens', video: 'www.youtube.com/watch?v=cyOqIKGbYkg'}

    ]

Don't we have an extra [ here?

Anyway, the real problem is that your browser is interpreting your URL as a local URL, thus trying to find it in your root (note the / before the URL in your error message). Adding http:// to your video URL (video property in your objects) should solve it.

answered Mar 16 '16 at 17:00

lucasnadalutti

5,818
1
28
48

there's an extra "[" there because I have more than one set of [track : "value", artist: "value", video: "value"]. i tried adding the http:// to my video properties..but it got me these errors Error: [$interpolate:interr] Can't interpolate: {{playlist.video}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. – Chireen Javier Mar 16 '16 at 17:09
I have the file here @lucasnadalutti .. https://onedrive.live.com/embed?cid=18C9FB1934828100&resid=18C9FB1934828100%214650&authkey=AGlfv6_pNw_sVoE – Chireen Javier Mar 16 '16 at 17:28
Please refer to this answer: http://stackoverflow.com/a/31313621/3334049 to see if it solves the problem you got into after inserting `http://` in the URL. – lucasnadalutti Mar 16 '16 at 17:32

alexey · Answer 2 · 2016-03-16T17:10:15.253

0

You have to change it to:

 controller('PlaylistCtrl', function($scope, $stateParams, $sceProvider) {
  $sceProvider.enabled(false); //this will cause CORS vulnerabilities.
  $scope.playlistSet = [
    [
      { track: 'Iris', artist: 'Sleeping with the Sirens', video: 'http://www.youtube.com/watch?v=cyOqIKGbYkg'}

    ]
  $scope.id = $stateParams.playlistId;});

edited Mar 16 '16 at 17:10

answered Mar 16 '16 at 17:02

alexey

1,381
9
19

i tried it, but it got me this error in return Error: [$interpolate:interr] Can't interpolate: {{playlist.video}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. – Chireen Javier Mar 16 '16 at 17:06
see updated answer, but it will cause CORS vulnerabilities. – alexey Mar 16 '16 at 17:10
the page went blank. I think the problem here is that my browser sees my video url as a local one.. i tried adding http:// but nothing happened... – Chireen Javier Mar 16 '16 at 17:13
well, initial problem solved, now you need to share more details. – alexey Mar 16 '16 at 17:14
https://onedrive.live.com/embed?cid=18C9FB1934828100&resid=18C9FB1934828100%214650&authkey=AGlfv6_pNw_sVoE @alexey – Chireen Javier Mar 16 '16 at 17:21

GET 404 (Not Found) - angular js link routing

2 Answers2