//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. bootstrap  日期控件  bootstrap-datepicker
			
    http://www.bootcss.com/p/bootstrap-datetimepicker/
    
			
    2. 
						
  2. linux安装tomcat
			
    一.下载tomcat 最新地址在:http://tomcat.apache.org 我下载的是:apache-tomcat-7.0.73.tar.gz,是已经编译好的包 解压文件后,移动到" ...
    
			
    3. 
						
  3. dede织梦批量导入关键词
			
    在后台替换对应的文件件即可. 注意:如果你的关键字长度超过16个字符的话,需要更改 dede 中 keywords 表中的keyword 字段字符长度 article_keywords_main.ph ...
    
			
    4. 
						
  4. 移动web页面前端开发总结
			
    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...
    
			
    5. 
						
  5. thinkphp模型
			
    1.获取系统常量信息的方法:在控制器DengLuController里面下写入下面的方法,然后调用该方法. public function test() { //echo "这是测试的&qu ...
    
			
    6. 
						
  6. Java/C++之 public、protected、private ; virtual & abstract
			
    一.绪 Java/C++都是面向对象的第三代计算机高级编程语言,其本质雷同,而语法确有差异,稍不注意容易引起混淆.本文总结了一些这两门语言的差异之处,仅供参考. 二.C++ 对于C++这门语言,就其类 ...
    
			
    7. 
						
  7. System.InvalidOperationException : 不应有 <Response xmlns=''>。
			
    xml如下: <?xml version="1.0" encoding="UTF-8"?> <Response version="2 ...
    
			
    8. 
						
  8. C# 如何强制关闭WINWORD进程
			
    private void KillProcess(string processName) //调用方法,传参{try{ Process[] thisproc = Process.GetProcesse ...
    
			
    9. 
						
  9. SQL创建流水号
			
    创建流水号表 CREATE TABLE SystemSerialNo ( SerialNoId INT PRIMARY KEY IDENTITY, TableName VARCHAR(60), Pre ...
    
			
    10. 
						
  10. POI对Excel自定义日期格式的读取
			
    用POI读取Excel数据:(版本号:POI3.7) 1.读取Excel private List<String[]> rosolveFile(InputStream is, String ...
    
			
    11.