2016-05-13 3 views
2

現在、私はAngular 2のコンセプト全体に頭を巻きつけています。私は過去にAngularJS(1)を使用していましたが、好きでした。角2字形のJavaScript?

現在、私は新しいプロジェクトを開始しており、なぜAngular 2を使い始めないのかと考えていました。今では誰もがjavascriptではなくTypescriptを使用しています。しかし、私はまだ簡単なWebホスティングサーバー(PHP、HTML、MySQL、Javascriptなど)でプロジェクトを実行可能にする方法が不明です。

Linuxサーバーでnpm startを実行できることは分かっていますが、ホスティングサーバーにどのように入れていますか? Typescriptをjavascriptにコンパイルして、npmを実行しなくてもブラウザで使用できるようにすることはできませんか?私はJSPMや他のいくつかのことについて読んでいますが、これが必要なのかどうかはわかりませんし、JSPMやそれに類するもの(JSBPMの「5分以下のクイックスタート」など)を使って実行する方法もわかります。

私が知っている角度2は、JavaScriptの部分があり、それは私のために働く。しかし、コーディング例はなく、インターネット上で見つけたものはすべてTypescriptです。だから私はチュートリアルの欠如のため、javascriptでAngular 2を実行することはできません。

簡潔に言えば、Typescriptを使用しても構いませんが、結果として純粋なjavascriptをHTMLにインポートしてそこから移動したいだけです。

また、サイドノートに関する質問では、productionを実行するときにすべてのnode_modulesが存在する必要がありますか?

これを説明するチュートリアルのボーナスポイント!

ありがとうございます!実際に

+0

あなたはES5またはES6を意味しますか? –

+0

"Typescriptをjavascriptにコンパイルして、ブラウザからnpmを実行せずにコンパイルするのが好きですか?" - > publish用のパッケージを作成する間に、typescriptファイルがJSにコンパイルされます。したがって、npmはホスティングに必要ではありません:) – meorfi

+0

私はES5を使うので、ブラウザはサーバーランタイムなしでも実行できます。 –

答えて

1

は、このに関するangular.ioウェブサイト上のドキュメントがあります:

それはES5 1に活字体コードを変換する方法を示しており、何だと思われますあなたが探しています。ここで

はサンプルです:

それはこのよう;-)

function HeroComponent() { 
    this.title = "Hero Detail"; 
} 

var HeroComponent = new ng.core.Component({ 
    selector: 'hero-view', 
    template: 
    '<h1>Hero: {{getName()}}</h1>' 
}).Class({ 
    constructor: function() { 
    }, 

    getName: function() { 
    return 'Windstorm'; 
    } 
}); 
行うことができます
  • 活字体

    import { Component } from '@angular/core'; 
    
    @Component({ 
        selector: 'hero-view', 
        template: 
        '<h1>Hero: {{getName()}}</h1>' 
    }) 
    export class HeroComponent { 
        title = 'Hero Detail'; 
        getName() {return 'Windstorm';} 
    } 
    
  • ES5

    function HeroComponent() { 
        this.title = "Hero Detail"; 
    } 
    
    HeroComponent.annotations = [ 
        new ng.core.Component({ 
        selector: 'hero-view', 
        template: 
         '<h1>Hero: {{getName()}}</h1>' 
        }) 
    ]; 
    HeroComponent.prototype.getName = 
        function() {return 'Windstorm';}; 
    

Angular2アプリケーションのパッケージ化については、この質問にも興味を起こさできます

1

いくつかのことをここに。 TypeScriptはJavaScriptではありません。これは、Web開発者がより安全で安全なコードを作成できるようにするためにMicrosoftが開発した言語であり、ブラウザが理解できるようにJavaScriptに変換(コンパイル)する必要があります(私はTSはブラウザに準拠していませんが、 。

このため、Angular 2の開発者は、フレームワークを使用するためのタイプスクリプトを提供することを選択しました。

角度2 documentationでは、JavaScriptからタイプスクリプトに移動する方法について説明します。

通常のウェブサイトと同じように、jsファイルをプロダクションサーバーに配置するだけです。

npm startについて:軽いWebサーバー(nodejs)を使用して開発環境をセットアップするのに役立つ開発ツールです。本番環境では使用しないでください。

だから、要するに、あなたはする必要があります(Webサーバを使用しない場合npm startで)

  1. は、開発マシン上のHTML、CSSや活字を書きます。

  2. JavaScript(ES5またはES6)を生成するには、TypeScriptコンパイラを使用します。

  3. HTML、CSS、およびコンパイル済みのJavaScriptファイルを本番サーバーに配置します(そこにnodejは必要ありません)。

+0

それは説明しています。このすべての周りに私の頭を折り返してください。誰かがこれに慣れていれば、それは情報過負荷です:)私はすでにコンパイルしなければならないことが分かっていました。ありがとう –

関連する問題