//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. supervisor监管进程max file descriptor配置不生效的问题
			
    配置了 sudo vim /etc/security/limits.conf * soft nofile * hard nofile   单独起进程没问题, 放到supervisor下监管启动,则报错 ...
    
			
    2. 
						
  2. Android Automotive开发之一《编译自己的SDK 》 // TOBEDONE
			
    自己动手编译最新Android源码及SDK : http://blog.csdn.net/dd864140130/article/details/51718187官方文档,怎样编译sdk : http ...
    
			
    3. 
						
  3. 脚手架搭建的vue项目里引入jquery和bootstrap
			
    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...
    
			
    4. 
						
  4. zabbix3配置短信报警
			
    需求:在zabbix服务器配置短信报警,当服务出现故障达到预警级别是通过发送短信的形式告诉运维人员,以便及时处理. 一.zabbix服务器端配置短信脚本 我的短信脚本放置位置为 /etc/zabbix ...
    
			
    5. 
						
  5. 室内定位系列（三）——位置指纹法的实现（KNN）
			
    位置指纹法中最常用的算法是k最近邻(kNN):选取与当前RSS最邻近的k个指纹的位置估计当前位置,简单直观有效.本文介绍kNN用于定位的基本原理与具体实现(matlab.python). 基本原理 位 ...
    
			
    6. 
						
  6. 7Hibernate高级----青软S2SH(笔记)
			
    
			
    7. 
						
  7. SQL Server性能计数器部署（批量）
			
    一.计数器部署项目介绍 SQL Server每个服务器,日常需要监控的计数器指标高达上百,若一个个手动添加非常麻烦.此项目通过命令行工具针对指定计数器集成部署,提高部署效率.此包括开发数据库互联(OD ...
    
			
    8. 
						
  8. Ubuntu 中Eclipse 默认的OpenJDK 和 SUNJDK问题总结
			
    今天 在 Ubuntu 12.04 X86 的虚拟机环境中 搭建C++ 的开发环境,默认 下载了 eclipse-cpp-mars-R-linux-gtk.tar.gz 是带有CDT 的: 关于 CD ...
    
			
    9. 
						
  9. Quick Cocos （2.2.5plus）CoinFlip解析（MenuScene display AdBar二次封装）
			
    转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...
    
			
    10. 
						
  10. ASP.NET知识总结  （未完） 本人新手
			
    1:HTTP的工作方式是什么?1)客户端提交表单请求处理 Request2)服务器端处理程序进行处理 Handle3)服务端相应 Response 2:1)get(默认值)是通过地址栏的URL显式地传 ...
    
			
    11.