正文

Angular2学习笔记(1)——Hello World

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 写在前面

之前基于Electron写过一个 Markdown 编辑器。就其功能而言，主要功能已经实现，一些小的不影响使用的功能由于时间关系还没有完成；但就代码而言，之前主要使用的是jQuery，由于本人非专业前段，代码写的自己都感觉是“一塌糊涂”，十分混乱。现在看到Angular2十分火爆，跑了跑它的The Tour of Heroes的例子，感觉非常不错，代码组织的井井有条，于是乎决定学习一下Angular2，然后用它将之前的NiceMark重写一下。

2. 整体感知

它组织代码的方式，引用其官方文档里的话就是：

You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules. ——GUIDE- 4. Architecture

大意就是说，你能这么去写一个Angular应用， 用Angular扩展语法写HTML模板，写组件类去管理这些模板，用服务添加应用逻辑，用模块打包组件和服务。

用官方文档里的图说明就是：

简单解释一下该图：

  1. 图的中间部分，在 component 的上面画了 Metadata 和 Template ，是说一个 Component（组件） 主要由 元数据（Metadata） 和 Template（模板） 构成。 Property Binding（属性绑定） 箭头表示可以在 component 里定义 property（属性） ，这些参数可以作为模板渲染的数据，而 binding（绑定） 的意思是说，一旦模板里的数据（比如一个输入框里数据）被修改了，它对应的 property 会自动地修改，或者反过来 property 被修改了，模板的相应内容也会跟着发生变化。 Event Binding 也类似，只不过针对的是 Event（事件） ：你可以在模板中写代码去监听某一事件（当然Angular有自己的“监听语法”），并指定该事件被触发时调用 component 类中哪个方法（函数）。想象一下，我们可以在该方法中去修改某些property，根据前面 Property Binding 描述的，模板也会跟着发生变化。是的，在Angular中，你再也不用（也不要）直接的去修改DOM，而是修改 property ，它就是一个变量，修改起来多么的直观方便，你再也不必写像 jQuery 那样（比如， $xxx.text('姓名: '+ user.name +'，年龄：'+ user.age) ）又臭又长的“恶心”代码了，尽管这可以用一些手段来优化，但总是不那么直观，简便。
  2. 图中两个虚线箭头是解释说明的意思，左边箭头解释的是，我们在编写一个 component 时，会依赖一些服务，而这些服务类不用自己去 new ，可以让Angular注入进来。比如我们要编写一个用来展示用户信息列表的组件，为此我们需要这些用户的信息，而这些用户信息需要通过发送HTTP请求去服务器中获取，这时我们可以写一个 UserService 类，写一个 getUsers 方法专门负责获取这些用户信息， component 只需要调用 UserService 的 getUsers 方法，便可以拿到这些信息，而获得 UserService 实例的方式最好不要自己去 new ，而是交给Angular去管理，让它帮我们注入进来。这点跟 Spring 依赖注入的意思是一样的。
  3. 右边的虚线箭头说的是，我们在编写模板时会用到一些 Directive（指令） ，这些指令被用来指导Dom的渲染。
  4. 最后还剩下图的左上角部分，是一个一个的 Module（模块） 。它们像集装箱一样将 Component ， Service 等较小的构成元素封装起来堆叠在一起，构成了一个完整的应用。

如果你还没有接触过 Angular 或者类似的框架，可能你还是不太明白Angular是怎么玩的 。不过没关系，以上内容只是让你对 Angular 有个大致的印象。实际上，它玩来玩去就是围绕以上提到的几个概念展开的，它们分别是：

  • module (模块)
  • component (组件)
  • template (模板)
  • metadata (元数据)
  • data binding (数据绑定)
  • directive (指令)
  • service (服务)
  • dependency injection (依赖注入)

只要明白了以上几个概念的意思，掌握了其用法，那就上道了。下文会结合几个小例子来解释这几个概念的含义的用法。

2. Hello World

老规矩，从Hello World开始。

有一点忘记说了，下面学习的是 Angular 的 TypeScript 版本。TypeScript是 JavaScript 的超集，它在JavaScript的语法上做了扩展，如果你对 TypeScript 还不了解，建议先简单看看 TypeScript 的语法，中文站和英文站都有。Angular的文档也是既有中文站，也有英文站，本文就是学习自 Angular 中文站，个人感觉翻译的非常好，并且点击每段文字都会出现英文原文，这点非常不错！

相关阅读

目录[+]