可能最簡單的 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 連線在一起。