原文地址: 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. drawRect与setNeedsDisplay简单介绍

    - (void)drawRect:(CGRect)rect { } p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: ...

  2. android 多线程

    本章讲述在android开发中,多线程的应用.多线程能够处理耗时的操作并优化程序的性能.本章主要介绍知识点,AsyncTask,Java线程池,ThreadPoolExecutor线程池类.本章案例只 ...

  3. 进新公司用cornerstone-checkout后遇到的奇葩bug，及解决方法

    从cornerstone中checkout下新的工程,运行报错. 1.开始错误原因是找不到相对应的某个.m文件的路径 解决方案:将缺少的.m文件重新从项目文件夹中导入 2.后来显示 造成的原因是在下面 ...

  4. Spring 4 集成Apache CXF开发JAX-RS Web Service

    什么是JAX-RS 在JSR-311规范中定义,即Java API for RESTful Web Services,一套Java API,用于开发 RESTful风格的Webservice. 工程概 ...

  5. Mysql存储过程和函数区别介绍

    存储过程是用户定义的一系列sql语句的集合,涉及特定表或其它对象的任务,用户可以调用存储过程,而函数通常是数据库已定义的方法,它接收参数并返回某种类型的值并且不涉及特定用户表. 存储过程和函数存在以下 ...

  6. MongoDB学习笔记~为IMongoRepository接口添加了增删改方法，针对官方驱动

    回到目录 上一讲说了MongoDB官方驱动的查询功能,这回说一下官方驱动的增删改功能,驱动在升级为2.0后,相应的insert,update和delete都只有了异步版本(或者叫并行版本),这当然也是 ...

  7. 搭建自己的PHP框架心得（二）

    h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...

  8. iOS视图弹出、平移、旋转、翻转、剪切等变换效果实现

    效果图: 1.定义属性 @property (nonatomic, strong) UIView *transformView;//发生变换的试图 @property (nonatomic, stro ...

  9. [已解决]Teamviewer VPN 连接上，但无法ping

    用Teamveiwer 可以进行远程控制连接.用了VPN功能后,起先也正常.可以PING和其他网络操作. 后来忽然始终VPN连接上后,无法PING和做其他的网络操作了. 检查缘由是对方TeamView ...

  10. 关于java中的MANIFEST.MF 文件内容

    打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录, 这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息.可以简化Java应用程 ...