2013-03-28 37 views
10

Tôi muốn phát triển ứng dụng html5 SPA cho một ứng dụng khách mỏng. Không có cách nào để khởi chạy bất kỳ máy chủ web nào trên đó. Và tôi không thể thực hiện công việc định tuyến mà không có máy chủ web.Định tuyến AngularJS mà không cần máy chủ web

index.html My

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

app.js My

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

} 

Tôi đang thử nghiệm mã này cục bộ trên máy tính của tôi trong Chrome. Ràng buộc dữ liệu hoạt động như một nét duyên dáng, nhưng liên kết đến trang đăng nhập thì không. Nó dẫn đến {X}: \ login. Vì vậy, câu hỏi của tôi là: là nó có thể làm cho nó hoạt động với máy chủ web? Và thứ hai những gì tôi đang thiếu để làm cho nó được thực hiện?

Trả lời

4

Sau một thời gian, tôi đã làm cho nó hoạt động.

Lúc đầu, tôi chuyển tác phẩm này vào tập tin riêng biệt

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

Thứ hai, trong index.html Tôi đã thêm này div

<div ng-view></div> 

Nó được sử dụng như một cái nhìn placeholder.

Bây giờ index.html được sử dụng làm "trang chính" hoặc "bố cục" nếu bạn quen với asp.net. Khi bạn nhấp vào liên kết, nội dung của tệp templateUrl được chèn vào div giữ chỗ.

Một nhược điểm của việc này là url nên trông như thế này <a href="#/login"></a>

+1

đây là phương pháp tiếp cận góc chuẩn. Đi qua hướng dẫn trên trang tài liệu – charlietfl

+0

Vâng, cảm ơn. Tôi đã nhận nó ngay bây giờ. – dantix

+1

Điều này không hiệu quả với tôi. Trong số các sửa đổi ở trên mà bạn đã đề cập trong câu trả lời của bạn, điều gì đã ngăn yêu cầu đến máy chủ? Đối với tôi, ứng dụng không hoạt động nếu không có máy chủ web. –

1

Dưới đây một số mã từ http://docs.angularjs.org/api/ng. $ Tuyến đường

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

Tôi nghĩ rằng tương tự sẽ làm việc cho bạn.

+0

Không, tôi đã thử điều này. Tôi đã có nó làm việc thực sự. Tôi sẽ đăng câu trả lời trong vài phút nữa. – dantix

2

góc là một khuôn khổ JS client-side, vì vậy nó không cần một máy chủ web. Bên cạnh việc thêm ng-view (như bạn đã tìm ra), bạn liên kết cần phải có một hashbang ở phía trước (#/login), trừ khi bạn đang sử dụng html5mode.

Vì vậy, việc băm nhỏ trong URL không phải là một hạn chế, đó là một tùy chọn.

+0

Rất hữu ích, nhưng làm cách nào khách hàng khác có thể truy cập ứng dụng .... chúng tôi có nên gửi cho họ mã ứng dụng khách như khách hàng dày cho mọi khách hàng không? – Jay

1

Giải pháp trong số này [Cross origin requests are only supported for HTTP] hoạt động đối với tôi.
Nhưng tôi thực sự không hiểu nó như thế nào bạn có thể làm cho nó hoạt động mà không có máy chủ web bằng cách sử dụng ngView và ngRoute?
Bạn cấu hình ngRoute để nhận login.html bên ngoài index.html, điều đó có nghĩa là bạn đang sử dụng dịch vụ AJAX để tải tệp, nhưng dịch vụ AJAX không thể hoạt động mà không có máy chủ web. Đó là lý do tại sao tôi gặp vấn đề của tôi.

+0

bạn có thể chạy cờ chrome với cờ có thể tháo rời-web-bảo mật để làm cho nó bỏ qua CORS và chính sách gốc giống nhau, nhưng hãy thực hiện cẩn thận. Khi tôi hỏi câu hỏi này, tôi đã phát triển ứng dụng cho trình duyệt nhúng trên thiết bị không có giới hạn bảo mật nghiêm ngặt như trình duyệt trên máy tính để bàn/thiết bị di động, vì vậy nó không phải là vấn đề đối với tôi. – dantix

+0

Cảm ơn bạn, Dantix. Điều gì về IE? –

+0

cùng một cách cho IE, bạn có thể vô hiệu hóa bảo mật web –

5

Bạn cần phải đặt mẫu của mình trong index.html bằng cách sử dụng thẻ tập lệnh để góc sẽ không còn cần phải thực hiện yêu cầu AJAX để tìm nạp chúng.

<script type="text/ng-template" id="home.html"> 
    This is the content of the template 
</script> 
Các vấn đề liên quan