angular2JS学习笔记1
发布时间:2020-12-17 10:12:36 所属栏目:安全 来源:网络整理
导读:天才第一步,配置环境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
天才第一步,配置环境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已经打开)
然后就可以看到根目录下多了一个文件夹node_modules和typings. 3.根目录下新建文件夹app //app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app',template: '<h1>My First Angular 2 App</h1>' }) 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.html <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 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/es6/dev/src/testing/shims_for_IE.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>--> <my-app>Loading~~~~</my-app> </body> </html> //styles.css /* Master Styles */ h1 { color: #369; font-family: Arial,Helvetica,sans-serif; font-size: 250%; } h2,h3 { color: #444; font-family: Arial,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.在根目录下终端运行
这时就会自动跳转到页面: 此时,我们的第一个angular2页面就完成啦 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |