可能最简单的 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 连接在一起。