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. POJ 1637 Sightseeing tour

    Sightseeing tour Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9276   Accepted: 3924 ...

  2. $.ajax()方法详解

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  3. CodeBlocks及LCM应用

    以下是在开发过程中遇到的一些细节点: 1)called after throwing an instance of std::bad_alloc 此问题是由于publish(data),当中data赋 ...

  4. 谈一下如何设计Oracle 分区表

    在谈设计Oracle分区表之间先区分一下分区表和表空间的个概念: 表空间:表空间是一个或多个数据文件的集合,所有数据对象都存放在指定的表空间中,但主要存放表,故称表空间. 分区表:分区致力于解决支持极 ...

  5. 使用haproxy的ACL封禁IP

    http://www.360doc.com/content/11/1226/13/834950_175075893.shtml 该方法,用户访问得到的是403页面 或者尝试用http-request拒 ...

  6. 常look的Git命令

    常用的Git命令   命令  简要说明 git add 添加至暂存区 git add–interactive 交互式添加 git apply   应用补丁 git am  应用邮件格式补丁 git a ...

  7. 因为多余jar包，所报的错

    今天,将项目部署到服务器时,出现了上述的错误.于是就开始找度娘了,找啊找,将项目里面的东西翻来覆去的改,不见效果,还多了些莫名其妙的错,当时就懵逼了.在百度上找到的方法都是说有jar包重复,项目里面的 ...

  8. Java防止SQL注入（转）

    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...

  9. Beta版本冲刺第六天

    Aruba 408 409 410 428 429 431 完成任务: 实现文字导出为图片 改进文字分享 改进存图片功能 修复一些已知bug 立会照片: 燃尽图: commit: coding.net ...

  10. Nginx 1.10.1 编译、配置文档(支持http_v2,TLSv1.2,openssl v1.0.2)

    1.安装常用工具及基础包: [root@localhost /]# yum -y install wget git vim make gcc gcc-c++ openssl-devel [root@l ...