2015-08-26 24 views
10

Đây là index.html với góc-alpha35:làm thế nào để sử dụng Angular2, systemjs địa phương KHÔNG Node.js/NPM

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <base href="/"> 
     <title>APP Ang2</title> 
     <script src="scripts/traceur-runtime.js"></script> 
     <script src="https://jspm.io/[email protected]"></script> 
     <script src="scripts/bundle35/angular2.dev.js"></script> 
     <script src="scripts/bundle35/router.dev.js"></script> 
     <meta name="viewport" content="width=device-width,initial-scale=1" /> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 
    <body> 

     <app>Loading...</app> 

     <script>System.import('app').catch(console.log.bind(console));</script> 

    </body> 
    </html> 

Và nó hoạt động tốt nếu có kết nối internet và system.js có thể tải . Nếu tôi cố gắng để có được một bản sao cục bộ của system.js như thế này:

<script src="scripts/[email protected]"></script> 

sau đó không có gì làm việc cho đến khi tôi đưa rx.js trong thư mục gốc và đưa dòng này vào cuối file:

<script src="scripts/[email protected]"></script> 
</body> 
</html> 

sau đó System.js hoạt động tốt, nhưng trong trường hợp này, có một vấn đề lạ với các ràng buộc angular2. chúng không hoạt động cho đến khi tôi thực hiện một số tương tác với trang (gửi biểu mẫu, mở một lựa chọn, làm cho một số div thay đổi kích thước của nó ngay cả với ẩn đơn giản, v.v.). Ngay sau khi một cái gì đó thay đổi trên trang, tất cả các ràng buộc có được để làm việc và trang được phục sinh.

Làm thế nào để làm cho tất cả công việc này cục bộ mà không có node.js và không có kết nối internet?

+0

Tôi sẽ thay đổi thẻ góc cho angular2 hoặc thứ gì đó thực sự liên quan đến angular2. Sau đó, node.js là phía máy chủ, bạn có thể phục vụ ứng dụng angular2 của mình bằng cách sử dụng một http đơn giản. Đối với systemjs nó là một điều khó khăn. Tôi vật lộn bản thân mình và có vẻ như phiên bản trực tuyến từ jspm khác với phiên bản bạn nhận được từ các gói. Ngoài ra, tất cả điều này sẽ được bao bọc một cách tốt hơn khi phiên bản cuối cùng tiếp cận. Trong khi đó, bạn có thể đi với dự án hạt giống này cung cấp cho một cấu trúc nhỏ, một thiết lập gulp, và xử lý phụ thuộc: https://github.com/mgechev/angular2-seed –

+0

Cảm ơn bạn đã bình luận của bạn. Tôi đã thay đổi các thẻ. Tôi đã nhìn thấy dự án hạt giống này, nhưng tôi thực sự muốn làm mà không có nút/gulp. Và nó hoạt động mà không có, chỉ là tôi phụ thuộc vào systemjs tải xuống mỗi lần. Tôi sẽ cố gắng kiểm tra phiên bản của jspm trong các gói, có thể nếu tôi đưa nó vào, nó sẽ hoạt động. Tôi nghĩ rằng nó hoàn toàn không logic mà tôi không thể làm tất cả điều này tại địa phương. – kakaja

+0

Bạn đã thêm điều này chưa? System.config ({ baseURL: '/ scripts' }); –

Trả lời

0

Nhờ Arnaud Boeglin's ý tưởng về sự khác biệt trong gói phiên bản, tôi đã kiểm tra với es6-module-loder và cơ hội cài đặt này hoạt động hoàn hảo (cho đến nay tôi không tìm thấy bất kỳ vấn đề nào):

<script src="scripts/traceur-runtime.js"></script> 
    <script src="scripts/es6-module-loader.js"></script> 
    <script src="scripts/[email protected]"></script> 
    <script src="scripts/bundle35/angular2.dev.js"></script> 
    <script src="scripts/bundle35/router.dev.js"></script> 

Trình tải mô-đun es6 phải nằm trước thẻ systemjs trong thẻ <head>.

5

Bạn nên bao gồm các phiên bản SFX của góc 2 như thế này:

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script> 

Lưu ý rằng đó là một khép kín js file bạn có thể tải về tại địa phương.

Kiểm tra dự án mẫu này tôi thực hiện trong github:

https://github.com/alfonso-presa/angular2-es5-sample

Edit: Kiểm tra câu hỏi này SO để làm rõ thêm về những gì SFX có nghĩa là: Difference between angular.dev.js and angular.sfx.dev.js

+0

Cảm ơn bạn! Nó thực sự là thú vị để xem một cài đặt hoàn toàn khác nhau của ng2. Mặc dù, đối với dự án của tôi, tôi vẫn muốn sử dụng system.js – kakaja

+0

Cảm ơn bạn đã liên kết để làm rõ. – kakaja

Các vấn đề liên quan