由于您是新手打字稿。我还是建议你关注5 分钟启动的 angular.io 文档。其中有具体的说明，并且很好地解释了如何开始使用。
Angular2 5 分钟快速入门页面 @ angular.io https://angular.io/docs/ts/latest/quickstart.html.
开始之前您需要具备以下基本条件：
-
Node.js https://nodejs.org/en/download/使用 npm 包管理器。
-
打字稿 https://www.npmjs.com/package/typescript与编译器。
- 文本编辑器或任何 IDE，VS Code.
- 任何浏览器，例如Chrome.
安装node js并安装npm（节点包管理器）。现在，您需要按照以下步骤开始：
- 创建您选择的根文件夹名称，例如ng2游乐场.
- 现在您必须在其中再创建一个文件夹，该文件夹实际上包含所有
.tsfiles/ 组件文件，你可以命名它app 名称与文档相同.
- 现在在根级别您必须放置 4 个文件。
3.1. tsconfig.json
3.2 打字.json
3.3 包.json
3.4 索引.html
- 当你设置它时，因为我们还没有完成，但你可以
npm start当我们加载完所有依赖项后，运行此命令开始编译并观察应用程序，同时开发其他组件。
现在，根据第 3 点，这些文件中应该包含哪些内容。
3.1：tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
3.2：打字.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
3.3：包.json
{
"name": "ng2-test",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
进展顺利，恭喜！然而我们需要最重要的文件index.html.
3.4：索引.html
<!doctype html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Okay!
我们的基本设置已经很好，但我们需要安装所有依赖项和开发依赖项，这是绝对必需的。你需要跑npm install。这将安装我们在package.json.
软件包安装完成后，您可以找到一个名为node_modules其中包含根据依赖项的所有文件package.json.
如果发生任何错误npm install您只需要更新开发/依赖项。
所以，我假设您已安装所有依赖项，然后让我们开始：
现在根据第 2 点，我们有一个名为app现在我们将把我们的.ts里面的文件。
创建一个名为app.component.ts，参见命名约定.component.ts这表示它是一个组件文件。把这段代码放进去：
import {Component} from 'angular2/core'; // <-- importing Component from core
@Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.
现在创建另一个名为main.ts. Why main.ts？这是因为index.html，我们已经定义了我们的Systemjs模块加载器，请参阅index.html
System.import('应用程序/主')
这是内容main.ts:
import {bootstrap} from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created
bootstrap(AppComponent); // finally bootstrap it.
现在我们完成了。
Yay!!!
然而我们需要运行它，为此我们必须cd ng2Playgroud进去。我们需要从命令提示符运行此命令，或者如果您安装了 git bash 则运行此命令：
npm start
并按回车键。现在它将编译并启动lite-server作为依赖项安装。如果一切顺利，您将看到模板My First Angular 2 App在浏览器中呈现。
