2014-09-02 56 views
6

Sadece TypEcs ile çalışmaya başladım ve Eclipse'de hata ayıklamak istediğim Typescript ve AngularJS'de bir web sayfası oluşturmaya çalışıyorum.Eclipse'de AngularJS ve TypeScript'te hata ayıklayabilir miyim?

  • Eclipse'deki bir TypeScript ve Angular sayfasını ayıklamak mümkün mü? Öyleyse lütfen bana doğru yönde rehberlik edebilir misiniz?

Ben typescript Bağımsız seçeneği ile tek typescript dosyası hata ayıklamak için denedim ve çalışıyor. Ama ben de AngularJS kullanmak istiyorum. Bir index.html dosyası ve bir app.ts dosyası oluşturdum. Ayrıca angular.d.ts ve angular.min.js'yi diğerleri arasında bir script klasörüne aktardım. Bunu, TypEcs TypeScript hata ayıklayıcılarından herhangi birini kullanarak yapabilir miyim? Çalıştırmayı denedim, ancak var app = angular.module'de bir hata alıyorum ... (ReferenceError: açısal tanımlı değil).

Tahminimce, dizin dosyasında bağladığım angular.min.js dosyası yüklenmemiş. Bunun nedeni, app.ts'nin TypeScript Standalone konfigürasyonunda ana dosya olarak ayarlanmış olması mı? (Index.html'yi seçemiyorum) Ve/Veya bazı kodları/ayarları kaçırıyor muyum?

Umarım bana yardımcı olabilirsin. Önceden teşekkürler! Burada

bazı örnek kodudur: index.html:

<html ng-app="helloworld"> 
<head> 
    <title>Hello World!</title> 
</head> 

<body> 
    <div class="container" ng-controller="HelloWorldCtrl"> 
     <input type="text" class="form-control" value="{{message}}" /> 
    </div> 
    <script src="../scripts/angular.min.js"></script> 
    <script src="app.js"></script> 
</body> 
</html> 

app.ts:

/// <reference path="../scripts/typings/angularjs/angular.d.ts"/> 
module Sample.HelloWorld { 

    export interface IHelloWorldScope extends ng.IScope { 
     message: string; 
    } 

    export class HelloWorldCtrl { 

     static $inject = ["$scope"]; 
     constructor(private scope: IHelloWorldScope) { 
      scope.message = "Hello World"; 
     } 
    } 

    var app = angular.module("helloworld",["ui.bootstrap"]); 
    app.controller("HelloWorldCtrl", HelloWorldCtrl); 
} 

cevap

4

Basarat Nasıl hata ayıklamak için

TypEcs dahildir "typescript Web Uzak" ayıklama seçeneğini kullanarak hata ayıklama angularjs ve typescript mümkündür belirtildiği gibi sayfa:

  1. Tüm açık krom pencereleri kapatın. Yine komuta chrome.exe'ye --Remote-ayıklama-port ile
  2. Açık Krom =
  3. 9222 başlangıç ​​sayfanızı açın TypEcs/2.0 - New and Noteworthy
  4. kısmındaki "WebKit uzaktan mod için typescript Debug Ekle" (göre bir ayıklama yapılandırmasını uygula Eğer hata ayıklamak istediğiniz dosya ile sekmesini seçmek için gereken yere index.html) noktasından krom penceresinde 1.
  5. git 3. adımdan yapılandırmayı kullanarak hata ayıklama görünümü
  6. ayıklama için
  7. bir diyalog belirir .
  8. Artık isterseniz kodu girebilir ve app.ts dosyasına kesme noktaları ekleyebilirsiniz.

(Adım seçeneklerini göremiyorsanız Ana iş parçacığı üzerinde tıklayın) Ve hatayı alırsanız tüm krom pencereleri kapatın ve chrome.exe ile krom yeniden "zaman aşımına uğradı bağlamak ayıklama için sekmeleri alınamadı" --remote-debugging-port = 9222 komutu.

1

I've tried to debug a single typescript file with the TypeScript Standalone option and it works. But I also want to use AngularJS

adım bağımsız olarak aynıdır. Sourcemaps etkin olmalıdır.

ReferenceError: angular is not defined

dosya sistemi ve/veya tarayıcı ağ isteğini kontrol angular.min.js için script etiketiyle sorun var.

Bkz: webkit uzaktan hata ayıklama: https://bitbucket.org/axmor/typecs/wiki/2.0%20-%20New%20and%20Noteworthy

+0

Yanıt için teşekkür ederiz. Artık uzaktan hata ayıklama seçeneğini kullanırken çalışır. Ben chrome.exe --remote-debugging-port = 9222 çalıştırmadan önce kapatmak için görünüşe göre ihtiyaç duyduğum başka bir krom pencere vardı veya hata ayıklama denediğinde "hata ayıklama bağlantı zaman aşımına uğradı almak" hatası aldım. Yine de Standalone modunda aynı hatayı alıyorum ama sanırım bunu kullanmamalıyım. Tekrar teşekkürler – Sofi

İlgili konular