2013-03-28 18 views
10

Chcę stworzyć aplikację html5 SPA dla cienkiego klienta. Nie ma sposobu, aby uruchomić na nim serwer WWW. I nie mogę zrobić routingu działa bez serwera WWW.Routing AngularJS bez serwera WWW

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

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

} 

ja testuje ten kod lokalnie na moim komputerze w Chrome. Powiązanie danych działa jak urok, ale link do strony logowania nie jest. Prowadzi do {X}: \ login. Moje pytania brzmią: czy możliwe jest sprawdzenie, czy działa on bez serwera WWW? A po drugie czego mi brakuje, żeby to zrobić?

Odpowiedz

4

Po pewnym czasie sprawiłem, że działa.

Początkowo Przeniosłem ten kawałek w osobnym pliku

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

Po drugie, w index.html Dodałem ten dział

<div ng-view></div> 

Jest on używany jako widok zastępczy.

Teraz index.html jest używany jako "strona główna" lub "układ", jeśli znasz asp.net. Po kliknięciu łącza zawartość pliku templateUrl wstawia się do elementu zastępczego div.

Wadą jest to, że adres URL powinien wygląda to <a href="#/login"></a>

+1

jest to standardowe podejście kątowe. Przejdź przez samouczek na stronie docs – charlietfl

+0

Tak, dziękuję. Mam to teraz. – dantix

+1

To mi się nie udało. Z powyższych modyfikacji, o których wspomniałeś w swojej odpowiedzi, co uniemożliwiło wysłanie żądania na serwer? Dla mnie aplikacja nie działała bez serwera WWW. –

1

Oto niektóre kod z http://docs.angularjs.org/api/ng. $ Route

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

myślę, że sama będzie pracować dla Ciebie.

+0

Nie, próbowałem tego. Rzeczywiście działa. Opublikuję odpowiedź w kilka minut. – dantix

2

kątowych to framework JS po stronie klienta, więc nie potrzebuje serwera WWW. Oprócz dodania widoku ng (jak już się domyśliłeś), linki muszą mieć hashbang z przodu (#/login), chyba że używasz trybu html5.

Zatem posiadanie hashbangu w adresach URL nie jest wadą, jest to opcja.

+0

Bardzo pomocny, ale w jaki sposób inny klient może uzyskać dostęp do aplikacji ... czy powinniśmy wysłać do klienta klienta kodu aplikacji, takiego jak gruby klient? – Jay

1

Rozwiązanie dla tego numeru [Cross origin requests are only supported for HTTP] działa dla mnie.
Ale tak naprawdę nie rozumiem, jak można to zrobić bez serwera WWW za pomocą ngView i ngRoute?
Konfigurujesz ngRoute, aby uzyskać login.html poza index.html, co oznacza, że ​​korzystasz z usługi AJAX w celu załadowania pliku, ale usługa AJAX nie może działać bez serwera WWW. Właśnie dlatego dostałem mój problem.

+0

można uruchomić chrome z flagą -disable-web-security, aby ignorować CORS i tę samą regułę pochodzenia, ale robić to ostrożnie. Kiedy zadawałem to pytanie, rozwijałem aplikację do osadzania przeglądarki na urządzeniu, które nie ma tak surowych ograniczeń bezpieczeństwa, jak przeglądarki komputerów/urządzeń mobilnych, więc nie było to dla mnie problemem. – dantix

+0

Dziękuję, Dantix. A co z IE? –

+0

w ten sam sposób dla IE, można wyłączyć zabezpieczenia WWW –

5

Musisz umieścić swoje szablony w samym pliku index.html za pomocą znaczników skryptów, dzięki czemu kątowe nie będą już potrzebować żądań AJAX do ich pobrania.

<script type="text/ng-template" id="home.html"> 
    This is the content of the template 
</script> 
Powiązane problemy