1.创建文件夹

mkdir angular2-app

cd    angular2-app

2.配置Typescript

需要通过一些特殊的设置来指导Typesript进行编译。
新建一个 tsconfig.json 文件，放于项目根目录下，并输入以下配置

{

  "compilerOptions": {

    "target": "es5",

    "module": "system",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  },

  "exclude": [

    "node_modules",

    "typings/main",

    "typings/main.d.ts"

  ]

}

3.Typescript Typings

有很多Javascript的库，继承了一些 Javascript的环境变量以及语法， Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 - d.ts 文件 （即 typings.json） 来解决这些兼容性问题。

创建 typings.json 文件，放于项目根目录下

{

  "ambientDependencies": {

    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"

  }

}

4.添加我们需要的库

我们推荐使用npm来管理我们的依赖库。在项目根目录下创建package.json文件

{

  "name": "angular2-quickstart",

  "version": "1.0.0",

  "scripts": {

    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "lite": "lite-server",

    "typings": "typings",

    "postinstall": "typings install"

  },

  "license": "ISC",

  "dependencies": {

    "angular2": "2.0.0-beta.7",

    "systemjs": "0.19.22",

    "es6-promise": "^3.0.2",

    "es6-shim": "^0.33.3",

    "reflect-metadata": "0.1.2",

    "rxjs": "5.0.0-beta.2",

    "zone.js": "0.5.15"

  },

  "devDependencies": {

    "concurrently": "^2.0.0",

    "lite-server": "^2.1.0",

    "typescript": "^1.7.5",

    "typings":"^0.6.8"

  }

}

5.安装这些依赖包只需要运行

npm install

这样我们就完成了我们的开发环境的搭建。

6.创建一个应用源码的子目录

我们习惯上将我们的程序放在项目根目录下的 app 子目录下，所以首先创建一个 app 文件夹

mkdir app

cd    app

7.创建组件文件

在 app 文件夹下创建一个 app.component.ts 文件，然后输入以下内容

import {Component} from 'angular2/core';

@Component({

    selector: 'my-app',

    template: '<h1>My First Angular 2 App</h1>'

})

export class AppComponent { }

让我们来详细的看一下这个文件， 在文件的最后一行，我们定义了一个 类。

8.初始化引导

在 app 文件夹下创建 main.ts

import {bootstrap}    from 'angular2/platform/browser'

import {AppComponent} from './app.component'

bootstrap(AppComponent);

我们需要做两个东西来启动这个应用

  1. Angular自带的 bootstrap 方法

  2. 我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

9.添加 index.html 文件

首先回到项目的根目录，在根目录中创建index.html

<html>

  <head>

    <title>Angular  QuickStart</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- . Load libraries -->

    <!-- IE required polyfills, in this exact order -->

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="node_modules/rxjs/bundles/Rx.js"></script>

    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- . Configure SystemJS -->

    <script>

      System.config({

        packages: {

          app: {

            format: 'register',

            defaultExtension: 'js'

          }

        }

      });

      System.import('app/main')

            .then(null, console.error.bind(console));

    </script>

  </head>

  <!-- . Display the application -->

  <body>

    <my-app>Loading...</my-app>

  </body>

</html>

HMTL中三个部分需要说明一下：

  1. 加载我们需要的 javascript库， 附录中会有详细的介绍

  2. 配置了 System 并让他import 引入 main 文件

  3. 添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

10.

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

Angularjs2 入门的更多相关文章

  1. 有没有最好的学习Angularjs2的视频入门体验？

    Which are the best video tutorials for learning AngularJS 2? 有没有最好的学习Angularjs2的视频入门体验? 翻译来源:https:/ ...

  2. AngularJS2基本构造

    2.NG2入门 2.1 基本构造 angularjs主要有8个构造快: 模块(module) 组件(component) 模板(template) 元数据(metadata) 数据绑定(data bi ...

  3. python scrapy 入门,10分钟完成一个爬虫

    在TensorFlow热起来之前,很多人学习python的原因是因为想写爬虫.的确,有着丰富第三方库的python很适合干这种工作. Scrapy是一个易学易用的爬虫框架,尽管因为互联网多变的复杂性仍 ...

  4. jxa快速入门,Javascript已加入AppleScript全家桶

    因为工作环境基本是以跨平台为主,所以纯mac本地化的AppleScript一直关注是不够的,前几天找资料发现AppleScript也在迅速的进步着,目前已经对Javascript做了比较好的支持--- ...

  5. Angular2 入门详解

    AngularJS 2 快速入门 npm是什么?   npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js ...

  6. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  7. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  8. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  9. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

随机推荐

  1. 【Unity Shaders】学习笔记

    http://www.cnblogs.com/-867259206/p/5596698.html

  2. [LeetCode] Largest Divisible Subset 最大可整除的子集合

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...

  3. echart折线图小知识

    1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...

  4. 重度使用示波器进行优化分析——一个DSDA项目回顾

    这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...

  5. 使用 Docker 编译 OpenWRT（Widora）

    Docker 是一种新的被称之为容器的虚拟机.本文将使用此工具,进行 OpenWRT 的编译. 在 Docker 中下载 Ubuntu 14.04 的镜像 使用以下命令可以十分方便的从远程服务器上将 ...

  6. Google C++命名规范

    时间:2014.03.02 地点:基地 -------------------------------------------------------------------------------- ...

  7. ViewController的生命周期分析和使用

    iOS的SDK中提供很多原生ViewController,大大提高了我们的开发效率,下面是我的一些经验. 一.结构 按结构可以对iOS的所有ViewController分成两类:1.主要用于展示内容的 ...

  8. [转]Java中导入、导出Excel

    原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...

  9. Android组件化和插件化开发

    http://www.cnblogs.com/android-blogs/p/5703355.html 什么是组件化和插件化? 组件化开发就是将一个app分成多个模块,每个模块都是一个组件(Modul ...

  10. CUDA[2] Hello,World

    Section 0:Hello,World 这次我们亲自尝试一下如何用粗(CU)大(DA)写程序 CUDA最新版本是7.5,然而即使是最新版本也不兼容VS2015 ...推荐使用VS2012 进入VS ...