AngularJS2.0 入门教程
2016-10-26 14:47
323 查看
1、打开系统命令窗口(默认目录是:C:\Users\***)
2、创建文件夹命令:mkdir angular-quickstart
3、跳转目录命令:cd angular-quickstart
4、手动创建一个package.json文件(命令创建一个package.json文件:npm init),复制以下内容到package.json
5、打开命令行,angular2-quickstart目录下输入npm install,然后等着就行了
6、配置Typescript,手动创建一个tsconfig.json文件(命令创建一个tsconfig.json文件:tsc --init 或 tsc -init),复制以下内容到tsconfig.json
7、在angular2-quickstart目录下建一个文件夹app,并在app文件夹里建一个文件叫app.component.ts,复制以下内容到app.component.ts
8、在app目录下建一个文件叫main.ts,复制以下内容到main.ts
9、在angular2-quickstart目录下建一个html文件叫index.html,复制以下内容到index.html
10、编译运行
angular2-quickstart目录下在命令行里输入npm start
2、创建文件夹命令:mkdir angular-quickstart
3、跳转目录命令:cd angular-quickstart
4、手动创建一个package.json文件(命令创建一个package.json文件:npm init),复制以下内容到package.json
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.3", "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.11" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^2.0.1", "typescript": "^1.7.5" } }
5、打开命令行,angular2-quickstart目录下输入npm install,然后等着就行了
6、配置Typescript,手动创建一个tsconfig.json文件(命令创建一个tsconfig.json文件:tsc --init 或 tsc -init),复制以下内容到tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] }
7、在angular2-quickstart目录下建一个文件夹app,并在app文件夹里建一个文件叫app.component.ts,复制以下内容到app.component.ts
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
8、在app目录下建一个文件叫main.ts,复制以下内容到main.ts
import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent);
9、在angular2-quickstart目录下建一个html文件叫index.html,复制以下内容到index.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>
10、编译运行
angular2-quickstart目录下在命令行里输入npm start
相关文章推荐
- [翻译]angularjs 2.0官方新手入门教程(3)
- angularjs2.0 五分钟入门教程之typescript版本
- [翻译]angularjs 2.0官方新手入门教程(2)
- [翻译]angularjs 2.0官方新手入门教程(4)
- C# 2.0中泛型编程初级入门教程
- silverlight 2.0 入门教程(一)
- silverlight 2.0 入门教程(三)
- RoR2.0快速入门教程(推荐)
- C# 2.0中泛型编程初级入门教程_C#教程
- AIR2.0入门教程[三]:与本地进程的数据通讯
- C# 2.0中泛型编程初级入门教程
- C# 2.0中泛型编程初级入门教程
- JSF2.0/Richfaces/MiniOA开发入门视频教程
- AIR2.0入门教程: ServerSocket -(2) ServerSocket
- AIR2.0入门教程: ServerSocket -(3) ServerSocket例子
- jsf2.0 入门视频 教程
- silverlight 2.0 入门教程(一)
- C# 2.0中泛型编程初级入门教程
- C# 2.0中泛型编程初级入门教程