Angular 2 Hello World javascript 实例

在这个教程里,我们将会用Angular 2 (2.0.0-beta.0)来创建一个简单的Hello World例子。在这个例子中我们将使用Javascript而不是官方推荐的Typescript来实现。如需要Typescript版本,请移步这里

所需的Js库以及版本都直接列在index.html里,所以我就不再赘述。

 

那么就开始吧。

文件结构

文件结构如下,可下载 实例源代码查阅。

Angular 2 Hello World javascript 实例 folder structure

boot.js

这个是Angular2的启动引导方式。

hello_world.js

在这个文件里,我们定义了一个叫”hello-world”的组件。这个最简单的组件基本没做什么事,只是定义了selector以及templateUrl。如果熟悉Angular 1的话应该就知道这2个东西是干什么的。

  • selector 就是我们自定义组件的html元素名
  • templateUrl 是自定义组件的模板url。当然,你也可以使用 template 来把你的模板内容直接放在这个文件里。

hello_world.html

这个就是我们自定义组件  <hello-world>  所使用的模板文件了。 Angular 2 的模板语法跟Angular 1略有不同。在这个模板文件里,我们的input输入框双向绑定name这个变量,然后在最下面的<h1>里判断name是否有值,并且显示Hello {{name}}。如果name为空的话则不显示。

index.html

最后,这个index.html里链接上我们需要的js文件,并且在 <body> 里使用我们前面所创建的自定义组件。

示例

按照上面步骤创建所有文件或者直接下载 实例源代码 然后在启动服务器运行。

在这个例子里我用的是Brackets IDE。

 

下面是运行结果:

Angular 2 Hello World javascript 实例 demo screenshot

参考

  1. Angular 2 Template Syntax
  2. Angular 2 Hello World TypeScript 实例

facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.