摘要:学习入门第一课步骤创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置文件创建文件编译
angular2 学习入门第一课 步骤
Install Node.js
创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置
Create the app’s Angular root component
Add main.ts, identifying the root component to Angular
Add index.html, the web page that hosts the application
Build and run the app
文件 创建文件touch package.json touch tsconfig.json touch typings.json touch systemjs.config.js touch index.html touch styles.css mkdir app touch app/app.component.ts touch app/main.ts
package.json { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently "npm run tsc:w" "npm run lite" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.4", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.14", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.10", "typings":"^1.0.4" } }
tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }
typings.json { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160621231320" } }
systemjs.config.js /** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { "app": "app", // "dist", "@angular": "node_modules/@angular", "angular2-in-memory-web-api": "node_modules/angular2-in-memory-web-api", "rxjs": "node_modules/rxjs" }; // packages tells the System loader how to load when no filename and/or no extension var packages = { "app": { main: "main.js", defaultExtension: "js" }, "rxjs": { defaultExtension: "js" }, "angular2-in-memory-web-api": { main: "index.js", defaultExtension: "js" }, }; var ngPackageNames = [ "common", "compiler", "core", "forms", "http", "platform-browser", "platform-browser-dynamic", "router", "router-deprecated", "upgrade", ]; // Individual files (~300 requests): function packIndex(pkgName) { packages["@angular/"+pkgName] = { main: "index.js", defaultExtension: "js" }; } // Bundled (~40 requests): function packUmd(pkgName) { packages["@angular/"+pkgName] = { main: "/bundles/" + pkgName + ".umd.js", defaultExtension: "js" }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this);编译
npm install npm run typings installOur first Angular component
mkdir app touch app/app.component.ts import { Component } from "@angular/core"; @Component({ selector: "my-app", template: "My First Angular 2 App
" }) export class AppComponent { } touch app/main.ts import { bootstrap } from "@angular/platform-browser-dynamic"; import { AppComponent } from "./app.component"; bootstrap(AppComponent); touch index.html
Angular 2 QuickStart Loading...
style.css
h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } body { margin: 2em; }Build and run the app!
npm start
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49974.html
摘要:快速入门是作者使用开发的前端框架因此你可以使用它快速创建一款它特别适合快速开发应用。配置路由通过使用我们可以动态配置所需要加载的主要目的是去设置中去进行惰性加载以及无论你传入什么样的参数值进去,都会被返回。 Angular AMD 快速入门 angularAMD是作者@ marcoslin使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一...
摘要:入门系列三组件概述组件是构成应用的基础和核心,它是用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。在早期的模块化工具中,多数只是针对文件部分做了处理,比如,而缺少对,等文件进行管理的工具。组件的详细介绍请见下一章节。。。 Angular2入门系列(三)————组件 1. 概述 组件(component)是构成Angular应用的基础和核心,它是用来包装特定的功能,应用程...
摘要:入门系列一如何在中使用和基于的插件在年的月中旬,官方终于正式发布。本篇文章就简单介绍下在中如何使用极其插件。按照插件的使用规则,在对应的中使用插件所需要的结构。 Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方终于正式发布Angular2。尽管npm社区越来越完善,也提供了大量的插件,但是基...
摘要:入门系列一如何在中使用和基于的插件在年的月中旬,官方终于正式发布。本篇文章就简单介绍下在中如何使用极其插件。按照插件的使用规则,在对应的中使用插件所需要的结构。 Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方终于正式发布Angular2。尽管npm社区越来越完善,也提供了大量的插件,但是基...
阅读 2022·2021-11-23 09:51
阅读 3661·2021-10-20 13:49
阅读 1671·2021-09-06 15:13
阅读 1784·2021-09-06 15:02
阅读 3017·2021-09-02 15:11
阅读 862·2019-08-29 15:37
阅读 1706·2019-08-29 13:24
阅读 2243·2019-08-29 11:28