天才第一步,配置环境node,nvm,npm,webpack等。
1.创建一个文件夹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: "My First Angular 2 App
" }) 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.htmlAngular 2 QuickStart Loading~~~~
//styles.css /* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, 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.ucloud.cn/yun/79220.html
本文是PostgreSQL修炼之道这本书的学习笔记,记录下疑惑或不解的地方. 这里也列一些资源: 官方文档:http://www.postgresql.org/files/documentation/pdf/9.4/postgresql-9.4-A... 中文文档:http://www.php100.com/manual/PostgreSQL8/ 阮一峰的博客:http://www.ruanyif...
阅读 2518·2021-11-22 13:53
阅读 3910·2021-09-28 09:47
阅读 796·2021-09-22 15:33
阅读 770·2020-12-03 17:17
阅读 3278·2019-08-30 13:13
阅读 2089·2019-08-29 16:09
阅读 1114·2019-08-29 12:24
阅读 2427·2019-08-28 18:14