AngularJS2.0 入门教程
来源:互联网 发布:js ajax获取网页 编辑:程序博客网 时间:2024/06/11 08:06
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
1 0
- AngularJS2.0 入门教程
- AngularJs2.0正式发布
- angularjs2.0指南
- AngularJS2.0 开发指南
- AngularJS2
- Angularjs2
- angularjs2
- 打造AngularJs2.0开发环境
- 打造AngularJs2.0开发环境
- AngularJS2.0教程(一)快速上手
- AngularJS2.0教程(一)快速上手
- AngularJS2.0 教程系列(一) (赞)
- angularJS2.0入门 命令行/npm下载安装
- angularjs2 一
- angularjs2 二
- angularjs2 三
- angularjs2 四
- angularjs2 五
- 多线程之synchronized(this)
- 并查集(DSU)
- [Lintcode]Maximum Product Subarray乘积最大子序列
- 音频(四) - 音频压缩(Speex使用&Opus简介)
- DataGridView第一行加序号
- AngularJS2.0 入门教程
- Leetcode 401 Binary Watch
- android在onCreate()方法中获取View的宽度与高度的方法实战
- 容易混淆的器件——硬件
- SAP中MM中取classification值调用函数
- guava实现MD5加密
- PostgreSQL学习笔记---5 学习中遇到的一些名词
- 我在ESB上走的弯路
- [Known issue and workaround]