天才第一步，配置环境node,nvm,npm,webpack等。
１．创建一个文件夹angular2-app.内置文件有package.json,tsconfig.json,typings.json.
//typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd","jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
}
}
//package.json
{
"name": "angular2-app","version": "1.0.0","scripts": {
"start": "tsc && concurrently \"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.15","systemjs": "0.19.26","es6-shim": "^0.35.0","reflect-Metadata": "0.1.2","rxjs": "5.0.0-beta.2","zone.js": "0.6.10"
},"devDependencies": {
"concurrently": "^2.0.0","lite-server": "^2.2.0","typescript": "^1.8.10","typings":"^0.7.12"
}
}
//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"
]
}
2.在当前目录下运行(确保node已经打开)
npm install
然后就可以看到根目录下多了一个文件夹node_modules和typings.
3.根目录下新建文件夹app
这里先写入两个文件app.component.ts和main.ts
//app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {
constructor(){}
}
//main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
4.在根目录下建立文件index.html和styles.css
//index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 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/es6/dev/src/testing/shims_for_IE.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>-->
<my-app>Loading~~~~</my-app>
</body>
</html>
//styles.css
/* Master Styles */
h1 {
color: #369;
font-family: Arial,Helvetica,sans-serif;
font-size: 250%;
}
h2,h3 {
color: #444;
font-family: Arial,sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body,input[text],button {
color: #888;
font-family: Cambria,Georgia;
}
/*
* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
* for the full set of master styles used by the documentation samples
*/
5.在根目录下终端运行
npm start
此时，我们的第一个angular2页面就完成啦
原文链接：https://www.f2er.com/angularjs/149656.html