可能最简单的 Angualr Hello World

Angular 1 是 DOM 编译器的核心。我们可以将 HTML 作为模板或仅作为常规网页传递,然后让它编译应用程序。

我们可以告诉 Angular 使用 {{ }} handlebars 样式语法将页面区域视为表达式。大括号之间的任何东西都将被编译,如下所示:

{{ 'Hello' + 'World' }}

这将输出:

HelloWorld

NG-应用

我们告诉 Angular 使用 ng-app 指令将 DOM 的哪个部分视为主模板。指令是 Angular 模板编译器知道如何处理的自定义属性或元素。我们现在添加一个 ng-app 指令:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

我现在告诉 body 元素是根模板。其中的任何内容都将被编译。

指令

指令是编译器指令。它们扩展了 Angular DOM 编译器的功能。这就是为什么 Misular 的创造者 Misko 将 Angular 描述为:

“如果它是为 Web 应用程序构建的,那么 Web 浏览器应该是什么样的。

我们确实创建了新的 HTML 属性和元素,并让 Angular 将它们编译成应用程序。ng-app 是一个简单地打开编译器的指令。其他指令包括:

  • ng-click,它添加了一个点击处理程序,
  • ng-hide,有条件地隐藏一个元素,和
  • <form>,它为标准 HTML 表单元素添加了额外的行为。

Angular 附带了大约 100 个内置指令,可以让你完成大多数常见任务。我们也可以自己编写,这些将与内置指令一样对待。

我们用一系列指令构建一个 Angular 应用程序,与 HTML 连接在一起。