脚本宝典收集整理的这篇文章主要介绍了Angular2环境搭建,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1.创建package.json文件
cd xhhAngular
npm inIT
package.json:
{
"name": "xhhangular",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack-dev-server --inline --hot --colors --PRogress",
"postinstall": "./node_modules/.bin/typings install"
},
"author": "xhh",
"license": "ISC",
"dePEndencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"RxJS": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"htML-webpack-plugin": "^2.28.0",
"path": "^0.12.7",
"ts-loader": "^0.8.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
2.创建tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"declaration": false
}
}
3.创建typings.json
{
"globalDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
}
}
现在运行 npm install 安装 package.JSON 里所有的依赖包:
npm install --registry=https://registry.npm.taobao.org/
4.创建app.module.ts
import 'zone.js/dist/zone';
import 'reflect-metadata';
import { NgModule } From '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {Appcomponent} from './app.COMponent';
// components, directives and pipes — belong in the declarations array.
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
5.创建app.component.ts
import { Component } from '@angular/core';
// 为 AppComponent 组件类添加注解
@Component({
selector: 'my-app',
template: '<h1>Hello {{title}}</h1><input type="text" #userRef (keyup)="onKeyup1(userRef.value)">',
styles:['h1{color:red}']
})
export class AppComponent {
title='World';
onKeyup1(userInput:string){
//这是typescript的写法,定义你的参数为string类型,并在调用的时候做检查
this.title=userInput;
}
}
6.创建main.ts
// 引入启动器
import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
// 引入入口文件
import { AppModule } from './app.module';
// 启动应用
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
7.创建主页面index.html