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. ACCELEROMETER

    顾名思义,是加速感应器.有2种应用吧:1,电脑保护,例如当笔记本掉落时,可以被自动检测到,此时会自动关闭硬盘操作以保护数据不在强烈冲击时丢失.

  2. 基于pcDuino-V2的无线视频智能小车

    这段时间抽空做了个智能视频小车.包含了pid电机控制.socket网络编程.多线程编程.epoll机制.gtk图形界面编程. 这是界面: 小车的底层是用的stm32f405系列的单片机+电机驱动做的一 ...

  3. mininet中iperf sever自动退出

    使用iperf 在mininet进行吞吐量测试是常用的方法,之前结束iperf server的方法是运行os.system('pkill iperf')命令. 但是这种方式iperf server有可 ...

  4. mysql benchmark基准测试

    git项目地址: https://github.com/akopytov/sysbench 利用sysbench很容易对mysql做性能基准测试(当然这个工具很强大,除了测试主流数据库性能,还能测试其 ...

  5. Hibernate 缓存机制浅析

    1. 为什么要用 Hibernate 缓存? Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能. 缓存内的数据是对物理数据源 ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _01服务器端与客户端需求分析

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. 初探Socket

    使用Socket Socket是两台主机之间的一个连接,它可以完成7个操作. 连接远程机器 发送数据 接收数据 关闭连接 绑定端口 监听入站数据 在绑定端口上接受来自远程机器的连接 Java中的Soc ...

  8. 使用bat(批处理文件类型)两步更改笔记本IP

    一.背景 在南农工的第三年里,学校终于给教学区覆盖了无线网NJAUPK,这解决了我在汇贤楼教室上自习没网写web的尴尬处境!经常在9栋和汇贤楼教学区之间来回,遇见了一个大问题:宿舍里无线需要更改IPV ...

  9. sql 触发器删除操作

    create trigger CheckDelete on 表 for delete as ) select @state=isnull(字段,'') from deleted if (@state& ...

  10. ArrayList_HashSet的比较及Hashcode分析

    ArrayList_HashSet的比较及Hashcode分析 hashCode()方法的作用   public static void main(String[] args) { Collectio ...