webentwicklung-frage-antwort-db.com.de

AngularJS-Routing ohne Webserver

Ich möchte die Anwendung html5 SPA für einen Thin Client entwickeln. Es ist nicht möglich, einen Webserver darauf zu starten. Und ich kann Routing ohne Webserver nicht funktionieren lassen.

Mein 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>

Meine 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) {

}

Ich teste diesen Code lokal auf meinem Computer in Chrome. Die Datenbindung funktioniert wie ein Zauber, der Link zur Anmeldeseite jedoch nicht. Es führt zum {X}:\login. Meine Fragen sind also: Ist es möglich, dass es mit unserem Webserver funktioniert? Und zweitens, was fehlt mir, um es fertig zu stellen?

11
dantix

Nach einer Weile habe ich es klappen lassen.

Zuerst habe ich dieses Stück in eine separate Datei verschoben

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

Zweitens habe ich in index.html dieses div hinzugefügt

<div ng-view></div>

Es wird als Ansichtsplatzhalter verwendet.

Jetzt wird index.html als "Masterseite" oder "Layout" verwendet, wenn Sie mit asp.net vertraut sind. Wenn Sie auf den Link klicken, wird der Inhalt der templateUrl-Datei in den Platzhalter div eingefügt.

Ein Nachteil davon ist, dass die URL so aussehen sollte <a href="#/login"></a>

4
dantix

Sie müssen Ihre Vorlagen mithilfe von Skript-Tags in index.html selbst ablegen, sodass Angle keine AJAX -Anforderungen mehr abrufen muss, um sie abzurufen.

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

Angular ist ein clientseitiges JS-Framework und benötigt keinen Webserver. Neben dem Hinzufügen der ng-view (wie Sie es bereits herausgefunden haben), müssen Sie vor dem Link einen Hashbang (#/login) haben, es sei denn, Sie verwenden html5mode.

Ein Hashbang in URLs ist also kein Nachteil, sondern eine Option.

2
Stewie

Die Lösung in dieser Ausgabe [ Cross Origin-Anfragen werden nur für HTTP unterstützt ] funktioniert für mich.
Aber ich verstehe es wirklich nicht, wie kann man es ohne Webserver schaffen, indem man ngView und ngRoute verwendet?
Sie konfigurieren ngRoute, um login.html außerhalb von index.html abzurufen. Das heißt, Sie verwenden den Dienst AJAX, um eine Datei zu laden. Der Dienst AJAX kann jedoch nicht ohne einen Webserver. Deshalb habe ich meine Ausgabe bekommen.

1
Jennie Ji

Hier ein Code von http://docs.angularjs.org/api/ng . $ Route

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

Ich denke, das gleiche wird für Sie funktionieren.

1
ardentum-c