Je construis un exemple d'application AngularJS à une seule page qui utilise Angular-UI-Router. Mais au lieu de l'installation habituelle où l'application Angular est servie via un serveur web, j'exécute une application côté serveur qui ne sert que la page index.html en réponse aux requêtes HTTP. Toutes les autres ressources nécessaires sont juste des pointeurs vers mon compartiment AWS S3 ou ailleurs.Pourquoi le <templateUrl> d'Angular-ui-router ne fonctionne-t-il pas lorsque tous mes fichiers sont hébergés dans un compartiment S3?
Je le fais parce que je veux pré-remplir les balises sur le côté serveur avec og:title de ma base de données afin que le scraper Facebook voit les valeurs appropriées (comme je l'ai discuté here). Cela ne peut pas être fait uniquement sur le client de l'utilisateur. C'est pourquoi je dois sauter à travers ces cerceaux.
Ainsi, lorsque vous courbez mon point final, il répond avec le code HTML suivant ma page d'index:
<!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>
Il rend sur la page comme prévu. Grand:
Voici les états-ui routeur spécifié dans http://static.predictagram.com/js/app.js:
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);
});
Cependant, le problème est que seul le bouton bleu fonctionne réellement. Les autres ne le font pas. Je peux voir que lorsque vous appuyez sur chaque bouton, il entre dans le contrôleur respectif (parce que j'ai mis une ligne console.log dans chacun d'eux). Mais seul le modèle spécifié pour l'état blue fonctionne.
Il est clair que c'est parce que l'état blue utilise template et tous les autres états utilisent templateUrl. Donc, je soupçonne qu'il ne peut pas trouver les fichiers html/red, html/green. html/splash.html. Peut-être qu'ils ne sont pas servis? Je ne sais pas. Comment puis-je m'assurer que mon application AngularJS Single-Page peut accéder à ces modèles html?
EDIT: Voici une image de la structure de mon application angulaire. Mais il est stocké dans mon seau S3. Donc, remplacer angular_app/ avec http://static.predictagram.com/: 
pouvez-vous s'il vous plaît insérez votre structure d'application ici? c'est beaucoup mieux si vous définissez 'templateUrl' à partir de l'application' root', par exemple 'templateUrl: '/ applicaion/partials/home.html'' – Maher
Maher, j'ai ajouté cela à la question initiale. Merci! –
[https://stackoverflow.com/questions/38921884/how-get-a-template-from-a-remote-url-with-angularjs](https://stackoverflow.com/questions/38921884/how-get -a-template-from-a-remote-url-avec-angularjs) – FerSomo11