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. webform Repeater重复器、地址栏传值、Response

    Repeater: 重复器 <HeaderTemplate></HeaderTemplate> - 头模板:在循环开始时,其内容只会打印一遍 <ItemTemplate& ...

  2. Linux的一些基本概述以及系统使用

    GNU:项目名称(意指开发在类UNIX系统上的软件).POSIX:可移植(Portable)操作系统接口,便于程序在不同操作系统上运行. Linux是符合POSIX标准的操作系统: 完全兼容POSIX ...

  3. ubuntu 14.04 desktop装vnc4server

    ubuntu 14.04 desktop上安装vnc4server要装上gnome的一些软件包并修改启动文件~/.vnc/xstartup 问题来源How to make VNC Server wor ...

  4. .NET、C#和ASP.NET，ASP.NET MVC 四者之间的区别

    经常,会有一些人搞不清楚.NET和c#和ASP.NET这三者之间的关系,她们都是什么呢?他们之间有什么关系呢?总结一下 首先:什么是.NET? .NET是微软公司下的一个开发平台,.NET核心就是.N ...

  5. jQuery--.wrap()方法

    1. .wrap()方法:在每个匹配的元素外层包上一个html元素. 2. 有两种使用方法: .wrap(wrappingElement):其中wrappingElement可以是一个HTML片段,选 ...

  6. Python NaN

    NaN, Not a Number, 非数. 它即不是无穷大, 也不是无穷小, 而是python/numpy/... 觉得无法计算时返回的一个符号(自己的推测, 未考证(TODO)). import ...

  7. 通过iMindMap改善你的工作方式的教程

    对于iMindMap 10,已经介绍了很多新增与改进的功能,你以为已经结束了?其实不然,本文,小编还会继续和你分享它的一个新功能与一个更新功能.这两个功能将在不经意间改善你的工作方式. 多媒体支持 在 ...

  8. javaScirpt事件详解-原生事件基础（一）

    事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能响应相关的操作.图片引用:UI Events 事件流 ...

  9. js中this关键字测试集锦

    参考:阮一峰<javascript的this用法>及<JS中this关键字详解> this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在 ...

  10. Socket编程实践(2) Socket API 与 简单例程

    在本篇文章中,先介绍一下Socket编程的一些API,然后利用这些API实现一个客户端-服务器模型的一个简单通信例程.该例子中,服务器接收到客户端的信息后,将信息重新发送给客户端. socket()函 ...