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.jsontouch tsconfig.json touch typings.jsontouch systemjs.config.jstouch index.htmltouch styles.cssmkdir apptouch app/app.component.tstouch 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 installnpm run typings install

Our first Angular component

mkdir apptouch app/app.component.tsimport { Component } from '@angular/core';@Component({  selector: 'my-app',  template: '
My First Angular 2 App
'})export class AppComponent { }touch app/main.tsimport { bootstrap }    from '@angular/platform-browser-dynamic';import { AppComponent } from './app.component';bootstrap(AppComponent);touch index.html

          
        
        
        
         
                        
                
          
    
     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