web-dev-qa-db-fra.com

Routage AngularJS sans serveur Web

Je souhaite développer une application SPA html5 pour un client léger. Il n'y a aucun moyen de lancer un serveur Web dessus. Et je ne peux pas faire en sorte que le routage fonctionne sans serveur Web.

Mon index.html

<!doctype html>
   <html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="app.js"></script>
    <title></title>
</head>
<body style="background-color: white;">
    <h1>Index</h1>
    <a id="link" href="/login">Go to login</a>
    <div ng-controller="HomeCtrl">
        <ul ng-repeat="number in numbers" >
            <li>{{number}}</li>
        </ul>
    </div>
</body>
</html>

Mon app.js

angular.module('app', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
      when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
      otherwise({redirectTo:'/'});
  });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}

Je teste ce code localement sur mon ordinateur sous Chrome. La liaison de données fonctionne comme un charme, mais le lien vers la page de connexion ne l’est pas. Cela mène au {X}:\login. Mes questions sont donc les suivantes: est-il possible de le faire fonctionner sans serveur Web? Et deuxièmement, que me manque-t-il pour le faire?

routingangularjssingle-page-application
11
dantix

Après un moment, j'ai fait en sorte que ça marche.

Au début, j'ai déplacé cette pièce dans un fichier séparé

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

Deuxièmement, dans index.html j'ai ajouté cette div

<div ng-view></div>

Il est utilisé comme espace réservé à la vue.

Maintenant, index.html est utilisé comme "maquette" ou "mise en page" si vous connaissez asp.net. Lorsque vous cliquez sur le lien, le contenu du fichier templateUrl est inséré dans un espace réservé div.

Un inconvénient de ceci est que l'URL devrait ressembler à ceci <a href="#/login"></a>

4
dantix

Vous devez placer vos modèles dans index.html lui-même, à l'aide de balises de script, de manière à ce que angular ne soit plus obligé de demander AJAX pour les récupérer.

<script type="text/ng-template" id="home.html">
  This is the content of the template
</script>
5
Saidh

Angular est un framework JS côté client, il n’a donc pas besoin d’un serveur Web. En plus d'ajouter la vue ng (comme vous l'avez déjà compris), vos liens doivent avoir un hashbang devant (#/login), à moins que vous n'utilisiez html5mode.

Donc, avoir un hashbang dans les URL n'est pas un inconvénient, c'est une option.

2
Stewie

La solution proposée dans ce numéro [ Les requêtes d'origine croisée ne sont prises en charge que pour HTTP ] fonctionne pour moi.
Mais je ne comprends vraiment pas comment vous pouvez le faire fonctionner sans serveur Web en utilisant ngView et ngRoute?
Vous configurez ngRoute pour obtenir login.html en dehors de index.html, cela signifie que vous utilisez le service AJAX pour charger un fichier, mais le service AJAX ne peut pas fonctionner sans serveur Web. C'est pourquoi j'ai eu mon problème.

1
Jennie Ji

Voici quelques codes de http://docs.angularjs.org/api/ng . $ Route

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

Je pense que cela fonctionnera pour vous.

1
ardentum-c