I am embedding YouTube video from database in Angular. If I use it directly without using database then it is working fine. But accessing it from database giving me below error.
Error: [$injector:unpr] http://errors.angularjs.org/1.3.2/$injector/unpr?p0=youtubeEmbedUrlFilterProvider%20%3C-%20youtubeEmbedUrlFilter
I searched on SO and found one question similar to this one.
how to embed video link from database in iframe using angularjs
But while using the same answer I am not able to play YouTube video. Actually video doesn't appear and same error I am getting.
YouTube video from db:
youtubevideo:"https://www.youtube.com/embed/c-z9M6KZs_0"
<div ng-style="{'display':youtubevideo == ''?'none':'block'}">
<iframe title="YouTube video player"
class="YouTube-player" type="text/HTML" width="350" height="194"
ng-src="{{youtubevideo| youtubeEmbedUrl}}" frameborder="0" allowfullscreen></iframe></div>
<!-- Youtube Video Above -->
Below code added in script file.
ProfileApp.filter('youtubeEmbedUrl', function ($sce) {
return function(videoId) {
return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + videoId);
};
});
What am I doing wrong?
console.clear();
var app = angular.module('myApp', []);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
app.controller('videoController', ['$scope',
function MyCtrl($scope) {
$scope.youtubevideo="https://www.youtube.com/embed/c-z9M6KZs_0";
$scope.getIframeSrc = function(src) {
return src;
};
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="videoController">
<div class="thumbnail">
<div class="video-container">
<iframe width="100%" ng-src="{{getIframeSrc(youtubevideo)}}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
</body>
</html>
Related
I want to develop simple front end AngularJS and backend Laravel. I don't know why my AngularJS route is not connected with laravel route.It keep mention as GET http://localhost/todos 404 (Not Found). I hope someone can help me to solve it. Thanks in advance.
Hello.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel + Angularjs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-App>
<div id="todos" ng-controller="Todoctrl">
<h3 class="page-header">Todos<small ng-if="remaining()">{{remaining()}} remaining</small>
</h3>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
{{todo.text}}
</li>
</ul>
</div>
</script>
<script src="js/app.js">
</script>
</body>
</html>
Todo.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
protected $guarderd = [];
}
App.js
function Todoctrl($scope,$http){
$http.get("/todos").success(function(todos){
$scope.todos = todos;
});
$scope.remaining = function(){
var count = 0;
angular.forEach($scope.todos,function(todo){
count == todo.done ? 0 : 1;
});
}
}
Route.php
Route::get('/', function () {
return view('welcome');
});
Route::get('/',function(){
return view('hello');
});
Route::get('/todos',function(){
return Todo::all();
});
You need to specify the whole URI like http://locahost:8000/todos and if you get problems with CORS you can use this library: LARAVEL CORS
NOTE: You must try this command too php artisan serve --host=0.0.0.0
15.html
<html>
<meta charset="utf-8">
<title>Angularjs htttp services</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script src="controller15.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="people">
<ul>
<h2> names and ages of the programmers</h2>
<li ng-repeat="person in persons">
{{ person.Name +':' +person.Age}}
</li>
</ul>
</div>
</body>
</html>
controller15.js
var app=angular.module('mainApp',[]);
app.controller('people', function($scope,$http)
{
$http.get('database.json')
.success(function(response)
{
$scope.person=response.records;
});
});
database.json where I stored the info:
{
"records":[
{
"Name":"mehul","Age":"13"
},
{
"Name":"ashok","Age":"23"
},
{
"Name":"rajesh","Age":"44"
}
]
}
I have attached all of the code, please review my code. I am a beginner in angularjs; it would be always good if you suggest me a particular material or web site to go through.
First: Do not use a minified version of angular to see described errors in
your browser console. then tel me what errors do you see!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
I am trying to follow along on the eggheads angularJS tutorials. I have the same code however mine is not working...
Here is the code I am using:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="../foundation/css/foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
main.js:
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
The problem is angular version.
Your version is 1.3.4 instead of 1.2.3.
App with angular 1.2.3 (egghead) : plunkr
App with angular 1.3.4 :plunker
Hi you've missed couple thing
Declaration of you app :
var app = angular.module('app', []);
Declaration of your controller
app.controller('FirstCtrl', FirstCtrl);
In your html
ng-app="app"
var app = angular.module('app', []);
app.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</body>
I am faced with an issue that I cannot find a solution for.
So I am trying to create an application that will display tracks taken from soundcloud and display them on my page using the soundcloud embeded player. I will be using DjangoREST to create a JSON list of all the tracks I want displayed. The JSON will have an entry to store the embeded HTML and will be packaged up and sent to the AngularJS front end.
The problem I am facing is that I am unable to actually display the embeded HTML even after using ng-bind-html.
I created a small demo to demonstrate the issue I am facing.
app.js
(function(){
var app = angular.module("tracklist", []);
app.controller("TrackListController", function () {
this.tracks = soundcloudtracks;
});
// Very basic JSON track coming in from DjangoREST
var soundcloudtracks = [
{
title: 'Track1',
artist: 'Artist1',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
},
{
title: 'Test2',
artist: 'Artist2',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
},
]
})();
index.html
<!DOCTYPE html>
<html ng-app="tracklist">
<head>
</head>
<body>
<div>
<div ng-controller="TrackListController as tracklistcont">
<div ng-repeat="track in tracklistcont.tracks">
<h1>{{ track.title }} - {{ track.artist }} </h1>
<div ng-bind-html="track.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
From my understanding I need to $sanitize the incoming HTML but I don't know how to properly sanitize each element within an ng-repeat. Could anyone help me out? I am completely lost at this point.
Thanks for your time.
Ok so I believe I was able to resolve the issue. I just created a method to sanitize my html.
app.js
(function(){
var app = angular.module("tracklist", ['ngSanitize']);
app.controller("TrackListController", ['$scope', '$sce', function($scope, $sce) {
this.tracks = soundcloudtracks;
$scope.deliberatelyTrustDangerousSnippet = function(html) {
return $sce.trustAsHtml(html);
};
}]);
// Very basic JSON track coming in from DjangoREST
var soundcloudtracks = [
{
title: 'Track1',
artist: 'Artist1',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
url: 'http://soundcloud.com/forss/flickermood',
},
{
title: 'Test2',
artist: 'Artist2',
html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&show_artwork=true&client_id=e72237107739281ffceb867534efd87c"></iframe>',
url: 'http://soundcloud.com/forss/flickermood',
},
]
})();
index.html
<!DOCTYPE html>
<html ng-app="tracklist">
<head>
</head>
<body>
<div>
<div ng-controller="TrackListController as tracklistcont">
<div ng-repeat="track in tracklistcont.tracks">
<h1>{{ track.title }} - {{ track.artist }} </h1>
<div ng-bind-html="deliberatelyTrustDangerousSnippet(track.html)"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-sanitize.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Now everything is working as expected!
I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.