angular2的第一个应用---Hello world!

最新推荐文章于 2022-11-23 22:29:53 发布

sanlingwu

最新推荐文章于 2022-11-23 22:29:53 发布

阅读量224

点赞数

分类专栏： angular2

本文链接：https://blog.csdn.net/sanlingwu/article/details/79347543

版权

angular2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <app></app>
  <script src="https://unpkg.com/zone.js@0.6.12/dist/zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
  <script src="https://unpkg.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
  <script src="https://unpkg.com/@angular/core@2.0.0-rc.4/bundles/core.umd.js"></script>
  <script src="https://unpkg.com/@angular/common@2.0.0-rc.4/bundles/common.umd.js"></script>
  <script src="https://unpkg.com/@angular/compiler@2.0.0-rc.4/bundles/compiler.umd.js"></script>
  <script src="https://unpkg.com/@angular/platform-browser@2.0.0-rc.4/bundles/platform-browser.umd.js"></script>
  <script src="https://unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.4/bundles/platform-browser-dynamic.umd.js"></script>
  <script src="./app.js"></script>
</body>
</html>

以上html文件定义了页面的基本框架。最后引用的是我们自己的应用代码。

在index.html的同一个目录里面，创建一个app.js文件如下：

var App = ng.core.Component({
  selector: 'app',
  template: '<h1>Hello {{target}}!</h1>'
})
.Class({
  constructor: function () {
    this.target = 'world';
  }
});

ng.platform.browser.bootstrap(App);

在以上代码中，我们定义了一个名为App的组件，其中带有一个app选择器，这个选择器会匹配整个应用范围内的所有模版，找出所有app标签。

我们给Class函数传递了一个对象字面量，其中只有一个叫作constructor的方法，在这个函数体中，我们新建了一个叫作target的属性，值为“world”。

最后一行代码调用了bootstrap方法来初始化应用，App是应用中的根组件。这里的bootstrap属于ng.platformbrowser这个命名空间，这是因为框架一开始就考虑到应该可以针对不同的平台而构建，对于不同的平台把bootstrap方法放在不同的命名空间下面，这样angular就可以使用不同的逻辑来初始化应用，包括对不同的平台引入不同的provider指令集合。

使用http-server指令，打开浏览器即可看到Hello world!字样。