bagusflyer/Angular.js with Bootstrap Template.markdown

## Angular.js with Bootstrap Template.markdown

      
    Raw
  

              Angular.js with Bootstrap Template.markdown
            
          
    Angular.js with Bootstrap Template

Angular UI - Bootstrap
A Pen by bagusflyer on CodePen.
License.

  
## index.html

<html >
  <head>
    <meta charset="UTF-8">
    <title>Angular.js with Bootstrap Template</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

    <div ng-app="app">
	    <div class="container-fluid" ng-controller="OpenloadCtrl">
		    <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular</h2>
      </div>
      <div text-aligned="center" >
        <video ng-src="{{ videoUrl }}" width="640" height="480" controls type="video/mp4">

        <!-- <video width="320" height="240" controls>
             <source src="" dynamic-url dynamic-url-src="{{videoUrl}}">
         </video> -->
      </div>

      <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'></script>
      <script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js'></script>
      <script src="js/index.js"></script>

  </body>
</html>

## script.js
// http://www.rubencanton.com/blog/2014/07/adding-video-src-with-angular.html

// setup app and pass ui.bootstrap as dep
var myApp = angular.module("app", ["ui.bootstrap"]);

/*
myApp.filter('trustUrl', function ($sce) {
  return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
});

myApp.directive('dynamicUrl', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attr) {
            element.attr('src', attr.dynamicUrlSrc);
        }
    };
});
*/

// setup controller and pass data source
myApp.controller("OpenloadCtrl", function($scope, $http, $sce) {

  $scope.videoUrl = "";

  $http.get('https://api.openload.co/1/file/dlticket?file=ra5G8DeqBg4&login=2a2998a18706cf69&key=tT_9wvd0').then(function(response) {
    if ( response.data.result ) {
      var ticket = response.data.result.ticket;
      $http.get('https://api.openload.co/1/file/dl?file=ra5G8DeqBg4&ticket=' + ticket).then(function(response) {

        if (response.data.result) {
          var url = response.data.result.url;
					$scope.videoUrl = $sce.trustAsResourceUrl(url);
        } else {
          console.log("Failed to load video");
        }
      });

    } else {
      console.log("Failed to load video");
    }
  });

});

## scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

## style.css
body {
  max-width: 32em;
  margin: 1em auto 0;
}

img { width: 30px; }

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

	<html >
	<head>
	<meta charset="UTF-8">
	<title>Angular.js with Bootstrap Template</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
	<link rel="stylesheet" href="css/style.css">
	</head>

	<body>

	<div ng-app="app">
	<div class="container-fluid" ng-controller="OpenloadCtrl">
	<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular</h2>
	</div>
	<div text-aligned="center" >
	<video ng-src="{{ videoUrl }}" width="640" height="480" controls type="video/mp4">

	<!-- <video width="320" height="240" controls>
	<source src="" dynamic-url dynamic-url-src="{{videoUrl}}">
	</video> -->
	</div>

	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'></script>
	<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js'></script>
	<script src="js/index.js"></script>

	</body>
	</html>
	// http://www.rubencanton.com/blog/2014/07/adding-video-src-with-angular.html

	// setup app and pass ui.bootstrap as dep
	var myApp = angular.module("app", ["ui.bootstrap"]);

	/*
	myApp.filter('trustUrl', function ($sce) {
	return function(url) {
	return $sce.trustAsResourceUrl(url);
	};
	});

	myApp.directive('dynamicUrl', function () {
	return {
	restrict: 'A',
	link: function postLink(scope, element, attr) {
	element.attr('src', attr.dynamicUrlSrc);
	}
	};
	});
	*/

	// setup controller and pass data source
	myApp.controller("OpenloadCtrl", function($scope, $http, $sce) {

	$scope.videoUrl = "";

	$http.get('https://api.openload.co/1/file/dlticket?file=ra5G8DeqBg4&login=2a2998a18706cf69&key=tT_9wvd0').then(function(response) {
	if ( response.data.result ) {
	var ticket = response.data.result.ticket;
	$http.get('https://api.openload.co/1/file/dl?file=ra5G8DeqBg4&ticket=' + ticket).then(function(response) {

	if (response.data.result) {
	var url = response.data.result.url;
	$scope.videoUrl = $sce.trustAsResourceUrl(url);
	} else {
	console.log("Failed to load video");
	}
	});

	} else {
	console.log("Failed to load video");
	}
	});

	});
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
	body {
	max-width: 32em;
	margin: 1em auto 0;
	}

	img { width: 30px; }