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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在构建一个使用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>

它呈现到页面预期。大：

以下是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/red，html/green。 html/splash.html。也许他们没有被服务？我不知道。我如何确保我的AngularJS Single-Page-App可以访问这些html模板？

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

回答：

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

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

以上是 为什么Angular-ui-router的&lt;templateUrl&gt;在我的所有文件托管在S3存储桶中都不起作用？ 的全部内容， 来源链接： utcz.com/qa/261833.html

回到顶部