• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

为什么Angular-ui-router的在我的所有文件托管在S3存储桶中都不起作用?

angularjs 来源:Saqib Ali 6次浏览

我正在构建一个使用Angular-UI-Router的示例AngularJS单页面应用程序。但是,我没有使用Angular应用程序通过Web服务器提供的常用设置,而是运行一个服务器端应用程序,它只是响应HTTP请求提供index.html页面。所需的所有其他资源只是指向我的AWS S3存储桶或其他位置的指针。为什么Angular-ui-router的<templateUrl>在我的所有文件托管在S3存储桶中都不起作用?

我这样做是因为我想在我的数据库中预先填充og:title服务器端的标签,以便Facebook刮取器看到正确的值(如我所讨论的here)。这不能纯粹在用户的客户端上完成。这就是为什么我必须跳过这些篮球。

所以,当你卷曲我的终点,它与我的索引页以下HTML响应:

<!DOCTYPE html> 
<html> 
    <head> 
     <base href="/"> 
     <meta property="og:title" content="Saqib's Pre-filled OG Title!"/> 
    </head> 
    <body ng-app="pangolinApp"> 
     <table> 
      <tr> 
       <td><a ui-sref="splash"><button>Splash</button></a></td> 
       <td><a ui-sref="blue"><button>Blue</button></a></td> 
       <td><a ui-sref="green"><button>Green</button></a></td> 
       <td><a ui-sref="red"><button>Red</button></a></td> 
      </tr> 
     </table> 
     <ui-view></ui-view> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
     <script src="http://static.predictagram.com/js/app.js" type="text/javascript"></script> 
     <script src="http://static.predictagram.com/js/splashController.js" type="text/javascript"></script> 
     <script src="http://static.predictagram.com/js/blueController.js" type="text/javascript"></script> 
     <script src="http://static.predictagram.com/js/greenController.js" type="text/javascript"></script> 
     <script src="http://static.predictagram.com/js/redController.js" type="text/javascript"></script> 
    </body> 
</html> 

它呈现到页面预期。大:

enter image description here

以下是http://static.predictagram.com/js/app.js指定的UI路由器的状态:

var app = angular.module("pangolinApp", ["ui.router"]); 
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('splash', {url:'/', templateUrl : "html/splash.html", controller : "SplashCtrl"}) 
    .state('blue', {url:'/blue', template: '<p>Hello From Blue!!</p> <p>Color = {{color}}</p>', controller : "BlueCtrl"}) 
    .state('green', {url:'/green', templateUrl: 'html/green.html', controller : "GreenCtrl"}) 
    .state('red', {url:'/red', templateUrl: 'html/red.html', controller : "RedCtrl"}); 
    $locationProvider.html5Mode(true); 
}); 

然而,问题是,只有按钮的实际工作。其他人不。我可以看到,当你按下每个按钮时,它将进入相应的控制器(因为我在每个控制器中都放了一个console.log行)。但只有为blue状态指定的模板正在工作。

显然这是因为blue状态使用template和所有其他状态使用templateUrl。所以我怀疑它找不到文件html/redhtml/greenhtml/splash.html。也许他们没有被服务?我不知道。我如何确保我的AngularJS Single-Page-App可以访问这些html模板?

编辑: 这里是我的角应用程序的结构照片。但它存储在我的S3存储桶中。因此,与http://static.predictagram.com/更换angular_app/enter image description here


===========解决方案如下:

当您设置templateUrl为:templateUrl: 'html/green.html'你告诉角度,你的模板可以在这个本地文件夹(HTML)中找到。 当您试图从远程服务器获取模板时,您必须使用绝对路线获取它们。例如:templateUrl: 'http://yourserver/templates/green.html'

因为它并不意味着这样的工作,你将不得不CORS错误,你可以看看这个问题/答案,它可以帮助你: How get a template from a remote URL with AngularJS


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)