クイックスタート

7321 ワード

概要
5分で0からG 2プロジェクトを構築します.https://angular.io/docs/js/latest/quickstart.html
運がいいですね.この文章を見ました.手間が省けます.一分で完成させます.クリックしてください.https://github.com/1329555958/angular2-quickstart
具体的な手順
仮にあなたがすでにnodejs環境を備えていると仮定します.新規ディレクトリ構造anglar 2-quickstart𞓜--ap𞓜--app.com mponent.js𞓜ー-boot.js𞓜ー-index.comを修正します.package.json(npm関連していますが、もしこの内容が分かりません.)実行時に赤いフォントの警告があるかもしれません.無視して、最後に成功します.
この時あなたはあなたのカタログがnode_より多く出ていることを発見しました.modules及び以下のカタログ.npm installを実行します.デフォルトのブラウザはページを開きます.http://localhost:3000 ないなら、連絡してください.
おめでとうございますあなたは素晴らしいです.疲れましたか?休憩会です.後で詳しく話します.
コードリストnpm start
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}
package.json
(function (app) {
    app.AppComponent = ng.core
        .Component({
            selector: '.my-app',//   CSS   
            template: '

My First Angular 2 App

' }
)
.Class({ constructor: function () { } }); }
)
(window.app || (window.app = {}));
app.component.js
(function (app) {
    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.AppComponent);
    });
})(window.app || (window.app = {}));
boot.js

<html>
<head>
    <title>Angular 2 QuickStarttitle>

    
    <script src="node_modules/angular2/bundles/angular2-polyfills.js">script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js">script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js">script>

    
    <script src='app/app.component.js'>script>
    <script src='app/boot.js'>script>

head>


<body>
<div class="my-app">Loading...div>
body>

html>