0

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
  });

app.controller('ModalCtrl', function($scope,  $modal) {
      
      $scope.name = 'theNameHasBeenPassed';
      
      $scope.showModal = function() {
        
        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };
          
        
        $scope.opts.resolve.item = function() {
            return angular.copy({name:$scope.name}); // pass name to Dialog
        }
        
          var modalInstance = $modal.open($scope.opts);
          
          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
    
     $scope.item = item;
    
      $scope.ok = function () {
        $modalInstance.close();
      };
      
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}
<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="ui-bootstrap-tpls-0.7.0.js"></script>
    <script src="example.js"></script>
    <link href="bootstrap-combined.min.css" rel="stylesheet">
    <style>
      .left-nav,.right-nav{
         float:left; 
      }
      .right-nav{
        margin-left:20px;
      }
      a{
        cursor:pointer; 
      }
    </style>
  </head>
  <body>


<div ng-controller="ModalCtrl">
    <div>Some Content</div>
    <button ng-click="showModal()">Click Me</button>
</div>

  </body>
</html>

<div class="modal-header">
  <h1>This is the title {{item.name}}</h1>
</div>'
<div ng-controller="Nav" class="modal-body">
 
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

whenever i tried to run my app in chrome it throws following error.

angular.js:7889 XMLHttpRequest cannot load file:///C:/Users/user/Desktop/Angular_modal_popup/modalContent.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

why its happen.? how to resolve it.?

I just download some example through plunker to learn but i can't run it anymore.

http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview

Above link was what I tried to learn and execute in my local machine. the example run properly good without no issues in plunker site but through error whenever i download and run it in my machine.

Got some answers from StackOverflow but I can't understand.

Kindly can anyone guide me step by step?

laser
  • 1,388
  • 13
  • 14
Like_2_Learn
  • 11
  • 4
  • hi @SaE pls take a look . edited my post and the following link http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview where i downloaded – Like_2_Learn Aug 04 '16 at 07:13
  • 1
    @Like_2_learn you are probably loading the html files directly into browser. You need to create local server to host these files. This is the problem. The angular loads templates through ajax hence in you case withouth local server and same domain likely to give this error. – The_ehT Aug 04 '16 at 07:15
  • how to set local server? do i need to install NPM and create port throw node? kindly explain me in details pls. or give my any working example/document thanks in advance @The_ehT – Like_2_Learn Aug 04 '16 at 07:22
  • yes you have to create server through npm or if you have visual studio, open folder as website and set index.html as startup page and hit run button above. – Amitpal Rawat Aug 04 '16 at 07:59
  • @Like_2_Learn-> http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes – random Aug 04 '16 at 08:01

1 Answers1

0

"Cross origin requests are only supported for HTTP." error when loading a local file The part where he mentions the browser can't explicitly load a file:// and instead using a webserver to load

Community
  • 1
  • 1
Jeson Dias
  • 883
  • 2
  • 11
  • 26
  • it means the browser unable to fetch file from CDN? if so. i download all depended file and mention it in index.html page like as follows – Like_2_Learn Aug 04 '16 at 07:16