原文地址: https://angular.io/docs/ts/latest/quickstart.html

让我们从 0 开始创建一个简单的 Angular 2 应用。

下载任何版本的 angularjs, 访问：https://code.angularjs.org/

不想用 JavsScript 语言？

虽然我们这里使用 JavaScript, 你也可以使用 TypeScript，或者 Dart 来开发 Angular 2 应用。

我们将用 6 步完成

1. 创建项目文件夹

2. 安装基础库

3. 创建应用组件

4. 启动应用

5. 创建 index.html

6. 运行

1. 创建项目文件夹

创建一个新的文件夹来保存你的项目，应该类似下面的样子。

mkdir angular2-quickstart

cd    angular2-quickstart

2. 安装基础库

我们使用 npm package manager  来安装需要的开发库和开发工具。

angular2 - Angular 2 库

live-server - 一个静态文件服务器，可以在修改文件之后，自动重新加载到浏览器中。

我们既可以直接引用 Web 上的库，也可以下载项目中。

还没有安装 NPM？赶紧安装它，我们在这里将会不断使用这个工具。

打开终端窗口，输入下面的命令。

npm init -y

npm i angular2@2.0.-alpha. --save --save-exact

npm i live-server --save-dev

这些命令将会创建名为 package.json 的项目文件，安装相应的软件包，现在的 package.json 看起来应该如下所示。

{

  "name": "angular2-getting-started",

  "version": "1.0.0",

  "dependencies": {

    "angular2": "2.0.0-alpha.44"

  },

  "devDependencies": {

    "live-server": "^0.8.1"

  }

}

还需要一个 scripts 的配置节，找到并替换为如下的内容, 在你的文件中可能根本就没有这个配置节, 那就加上好了.

"scripts": {

    "start": "live-server"

  }

我们使用它来扩展项目，以便运行脚本命令，很快就会用到。

3. 第一个 Angular Component

添加一个名为 app.js 的文件，输入下面的内容。

var AppComponent = ng

  .Component({

    selector: 'my-app',

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

  })

  .Class({

    constructor: function () { }

  });

我们正在创建一个名为 AppComponent 的可视组件，通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。

var AppComponent = ng

    .Component({...})

    .Class({...})

Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素，Angular 将会创建和显示 AppComponent 实例

template 属性定义了组件的可视外观。在这个示例中，我们使用了内联的模板，我们也可以把这个模板调整到一个模板文件中，然后通过 templateUrl 来关联模板文件的名称来使用它。

我们使用 Class 方法实现这个组件本身的内容，可以定义属性，方法并绑定到这个视图

现在的组件是一个最小化的实现，构造函数中没有内容。在以后的示例中，我们会看到很多有趣的内容。

4. 启动应用

我们需要在应用中做点什么，在 app.js 的最后，添加下面的内容。

document.addEventListener('DOMContentLoaded', function() {

  ng.bootstrap(AppComponent);

});

我们等到浏览器通知我们说，内容已经加载完成了，然后再调用 bootstrap 方法。

bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用，

应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作.

Wrapped in an IIFE

我们不希望污染全局命名空间，但是,现在还不需要应用到命名空间，我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。

(function() {

var AppComponent = ng

  .Component({

    selector: 'my-app',

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

  })

  .Class({

    constructor: function () { }

  });

document.addEventListener('DOMContentLoaded', function() {

  ng.bootstrap(AppComponent);

});

})();

5. 创建 index.html

在项目文件夹中添加名为 index.html 的页面，内容如下：

<html>

  <head>

    <title>Angular 2 QuickStart</title>

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

    <script src="app.js"></script>

  </head>

  <body>

    <my-app></my-app>

  </body>

</html>

在 head 中，我们的应用加载了两个脚本

angular2.sfx.dev.js, Angular2 的开发库

app.js, 我们刚刚开发的脚本。

在 body 中，使用了名为 <my-app> 的元素，这是应用的根的占位，Angular 将在这里显示我们的应用。

6. Run it!

我们需要一个文件服务器来服务静态资源。

对这个示例来说，我们这里使用通过 npm 安装的 live-server，因为它默认就提供了动态加载。

打开终端窗口，输入下面的命令。

npm start

还记得我们添加的 npm 命令吗？

live-server 自动帮我们启动浏览器，当我们更新文件的时候，还可以自动刷新页面。

稍等一下，浏览器就会显示出下面的内容。

做一点修改

live-server 自动检测项目文件的修改，并刷新浏览器。

将项目的信息修改为 "My Second Angular 2 app.", live-server 会检测到修改自动刷新显示。

保持 live-server 运行在终端窗口中，并进行更多的修改，可以使用 Ctrl-C 来停止它。

祝贺你，我们完成了！

Angular 2 - 5 分钟快速入门的更多相关文章

  1. Vue.js 60 分钟快速入门

    Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

  2. 不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  3. 一分钟快速入门openstack

    一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...

  4. Vue.js——60分钟快速入门（转）

    vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...

  5. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  6. 5分钟快速入门 - Less

    下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS ...

  7. ichartjs一分钟快速入门教程

    1.构建项目环境 由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境.代码如下: <script type="tex ...

  8. Redis 十分钟快速入门

    本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...

  9. 翻译：Angular 2 - TypeScript 5 分钟快速入门

    原文地址:https://angular.io/docs/ts/latest/quickstart.html Angular 2 终于发布了 beta 版.这意味着正式版应该很快就要发布了. 让我们使 ...

随机推荐

  1. Android—实现自定义相机倒计时拍照

    这篇博客为大家介绍Android自定义相机,并且实现倒计时拍照功能 首先自定义拍照会用到SurfaceView控件显示照片的预览区域,以下是布局文件: 两个TextView是用来显示提示信息和倒计时的 ...

  2. UIScrollView的delegate方法妙用之让UICollectionView滑动到某个你想要的位置

    一个UICollectionView有好多个cell,滑动一下,谁也不知道会停留在哪个cell,滑的快一点,就会多滑一段距离,反之则会滑的比较近,这正是UIScrollview用户体验好的地方. 如果 ...

  3. 使用AIDL调用远程服务设置系统时间

    在实际工作中,经常遇到客户需要用代码设置系统时间的需求,但是Android非系统应用是无法设置系统时间的.于是,我设计了一个使用系统签名的时间设置服务,客户通过bind调用服务里的方法就能达到设置时间 ...

  4. SQL Server Column Store Indeses

    SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...

  5. Hive官方手册翻译(Getting Started)

    翻译Hive官方文档系列,文中括号中包含 注: 字样的,为我自行标注的,水平有限,翻译不是完美无缺的.如有疑问,请参照Hive官方文档对照查看.   内容列表 Cloudera制作的Hive介绍视频 ...

  6. 大数据系列（1）——Hadoop集群坏境搭建配置

    前言 关于时下最热的技术潮流,无疑大数据是首当其中最热的一个技术点,关于大数据的概念和方法论铺天盖地的到处宣扬,但其实很多公司或者技术人员也不能详细的讲解其真正的含义或者就没找到能被落地实施的可行性方 ...

  7. oracle行转列与列转行

    一.行转列 在有些应用场景中,如学生成绩.学生所有科目的成绩都保存到一张表里面,当我们需要以列表的形式显示出学生所对应的每一科目的成绩的时候,需要使用到行转列. 示例 -- 学生成绩表 create ...

  8. GacUI学习（一）

    GacUI学习(一)之高仿系统记事本(一) 转载请注明来源:http://www.cnblogs.com/lyfh/p/6107215.html GacUI是轮子哥(vczh)精心打造的跨平台C++转 ...

  9. linux 命令行中常用光标移动快捷键

    对linux不怎么熟悉,以前在linux中敲命令的时候,要移动光标,傻傻的一个一个的移动,感觉特不爽.有几个常用的快捷键. ctrl+左右键:在单词之间跳转 ctrl+a:跳到本行的行首 ctrl+e ...

  10. Git安装与配置

    一.简介 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的 ...