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