//package.json  用来标记本项目所需的npm依赖包

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}
//tsconfig.json 定义了TS编译器如何生成JS代码

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
//systemjs.config.js  为模块加载器提供了该去哪里查找模块，并注册了所有必备的依赖包

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

由于官网镜像国内被墙，这里可以使用淘宝的npm镜像，安装如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install

如果不受网络限制，可以直接npm install

创建Angular组件

组件（Component）是构成Angular应用的基础，一个组件包含一个特定功能，组件之间协同工作组成完整的应用程序。

每个Angular应用至少包含一个组件：根组件，这里名叫AppComponent

app/app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

创建Angular模块(应用的入口点)

每个Angular应用至少包含一个模块：根模块，这里叫AppModule

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

加载AppModule

//app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

定义应用的宿主页面：

index.html

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

编译并运行应用

npm start

												


											
AngularJS2的更多相关文章
	

    
						
  1. AngularJs2与AMD加载器(dojo requirejs)集成
		
    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
    
		
    2. 
						
  2. Node学习笔记（四）：gulp+express+io.socket部署angularJs2（填坑篇）
		
    这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angular ...
    
		
    3. 
						
  3. 打造AngularJs2.0开发环境
		
    angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...
    
		
    4. 
						
  4. angularjs2 学习笔记（一） 开发环境搭建
		
    开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装node.js(https://nodejs.org/en/) ...
    
		
    5. 
						
  5. [nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用
		
    新手练习,尝试使用angularjs2 [angularjs2 数据绑定,监听数据变化自动修改相应dom值,非常方便好用,但与传统js(jquery)的使用方法会很不同,Dom操作也不太习惯] 应用效 ...
    
		
    6. 
						
  6. AngularJS2之本地环境搭建
		
    前言:本来准备初探AngularJS2,结果成了复习git和再探node git的两个常见问题:一.github上传时出现error: src refspec master does not matc ...
    
		
    7. 
						
  7. webapi 发布接口报405错误（angularjs2.0）
		
    参考链接:http://www.cnblogs.com/shenbin/p/5680976.html web访问接口报405错误,以前的jQuery访问方式访问接口没有问题. 但是换成angularj ...
    
		
    8. 
						
  8. AngularJS2基本构造
		
    2.NG2入门 2.1 基本构造 angularjs主要有8个构造快: 模块(module) 组件(component) 模板(template) 元数据(metadata) 数据绑定(data bi ...
    
		
    9. 
						
  9. TypeScript基本知识（为学习AngularJS2框架做个小铺垫）
		
    学习angularjs2框架,需要了解一些TypeScript知识点,基本了解下面这几个知识点学习AngularJS2 就够用了 1.TypeScript 1.1显示类型的定义 TypeScript类 ...
    
		
    10. 
						
  10. 迈向angularjs2系列(1):typescript指南
		
    typescript指南 前言 typescript是angularjs2推荐使用的脚本语言.它由微软2012年首次发布. 一.    typescript和javascript的区别 1.从遵循的规 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. POJ 2251 Dungeon Master（3D迷宫 bfs）
			
    传送门 Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28416   Accepted: 11 ...
    
			
    2. 
						
  2. 将一张表的数据，拷贝到另一张表中sql
			
    两张表的字段一样 create table 目标表 as  select * from 原表;
    
			
    3. 
						
  3. HTML基础标签入门
			
    HTML基础标签 昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html&g ...
    
			
    4. 
						
  4. PHPCMS调用点击量的方法
			
    具体方法: 首先:需要在show.html 模板中首先加载jquery.min.js 这个js 其次:需要在要显示点击次数的位置写入: <span>点击:<span id=" ...
    
			
    5. 
						
  5. ThinkphpCMF笔记
			
    1.模板js,css文件__PUBLIC__ <link href="__TMPL__Public/style.css" rel="stylesheet" ...
    
			
    6. 
						
  6. SQL记录
			
    create table test( 教师号 integer , 星期一 integer null, 星期二 integer null, 星期三 integer null); insert into  ...
    
			
    7. 
						
  7. 旧版本APP被开发人员下架，新版本重新上传依然显示被下架
			
    新接了一个项目,这个项目在苹果商城上面的版本已经被原来另外一家公司的开发人员下架.我们重新设计.开发.上传,申请加急审核,终于完成手动发布.但是发布成功后,新版本提示:被开发人员下架.以前虽然迭代开发 ...
    
			
    8. 
						
  8. TaskCompletionSource<TResult>
			
    参考:https://blogs.msdn.microsoft.com/pfxteam/2009/06/02/the-nature-of-taskcompletionsourcetresult/
    
			
    9. 
						
  9. Excel—利用散点图计算相关系数
			
    1.建立数组 2.创建散点图. 3.添加趋势线. 4.设立为线性函数,勾选显示公式.显示R^2值,R即为相关系数. 5. 备注:此外也可以使用=CORREL()函数对相关系数进行求值.其结果是一致的.
    
			
    10. 
						
  10. [从产品角度学EXCEL 00]-为什么要关注EXCEL的本质
			
    前言 Hello 大家好,我是尾巴,从今天开始,在这里连载<从产品角度学EXCEL>的系列文章.本文不接受无授权转载,如需转载,请先联系我,非常感谢. 与世面上的大部分EXCEL教程不同的 ...
    
			
    11.