Angular 2 环境搭建
程序员文章站
2022-07-12 17:08:18
...
1、下载安装 nodejs 和 npm
2、新建文件夹 ‘angular2-quickstart-master’
3、在 ‘angular2-quickstart-master’ 添加文件 目录结构如下：
index.html:
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<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/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
moment: 'node_modules/moment/moment.js',
"@angular/core": "node_modules/@angular/core/core.umd.js",
"@angular/common": "node_modules/@angular/common/common.umd.js",
"@angular/compiler": "node_modules/@angular/compiler/compiler.umd.js",
"@angular/platform-browser": "node_modules/@angular/platform-browser/platform-browser.umd.js",
"@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js",
// ng2-bootstrap specifics
"@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",
// "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>
</html>package.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"postinstall": " ./node_modules/.bin/typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"bootstrap": "^3.3.6",
"es6-shim": "0.35.0",
"ng-semantic": "^1.0.21",
"ng2-bootstrap": "1.0.16",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.28",
"typings": "0.8.1",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "2.0.0",
"lite-server": "2.2.0",
"typescript": "1.8.10"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"listFiles": true
},
"exclude": [
"node_modules",
"typings/browser.d.ts"
]
}typings.json:
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
}
}
4、打开终端运行： npm install，可能需要等待一段时间下载，下载完成后项目目录下会多出’node_modules‘的文件夹。
5、再在项目根目录下新建app文件夹，添加文件 app.component.ts:
import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES,CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [AlertComponent, DATEPICKER_DIRECTIVES],
template: `
<alert type="info">ng2-bootstrap hello world!</alert>
<pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
`
})
export class AppComponent {
public dt:Date = new Date();
private minDate:Date = null;
private events:Array<any>;
private tomorrow:Date;
private afterTomorrow:Date;
private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
private format = this.formats[0];
private dateOptions:any = {
formatYear: 'YY',
startingDay: 1
};
private opened:boolean = false;
public getDate():number {
return this.dt && this.dt.getTime() || new Date().getTime();
}
}和 boot.ts:
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component'
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);再打开终端，cd到你项目根目录下运行，npm start 这样你的项目就跑起来了
转载于:https://my.oschina.net/mercyyang/blog/682319
上一篇： zookeeper学习前沿--分布式系统