AngularJS - 第一個應用

在使用 AngularJS 建立實際的 Hello World ! 應用之前，讓我們先了解 AngularJS 應用的組成部分。一個 AngularJS 應用包含以下三個重要的部分：

ng-app − 此指令定義並連結 AngularJS 應用到 HTML。
ng-model − 此指令將 AngularJS 應用資料的值繫結到 HTML 輸入控制元件。
ng-bind − 此指令將 AngularJS 應用資料繫結到 HTML 標籤。

建立 AngularJS 應用

步驟 1：載入框架

作為一個純 JavaScript 框架，它可以使用 <Script> 標籤新增。

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

步驟 2：使用 ng-app 指令定義 AngularJS 應用

<div ng-app = "">
   ...
</div>

步驟 3：使用 ng-model 指令定義模型名稱

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

步驟 4：使用 ng-bind 指令繫結上面定義的模型的值

<p>Hello <span ng-bind = "name"></span>!</p>

執行 AngularJS 應用

在 HTML 頁面中使用上述三個步驟。

testAngularJS.htm

即時演示

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

輸出

在 Web 瀏覽器中開啟 testAngularJS.htm 檔案。輸入你的姓名並檢視結果。

AngularJS 如何與 HTML 整合

ng-app 指令指示 AngularJS 應用的開始。
ng-model 指令建立一個名為 name 的模型變數，該變數可以與 HTML 頁面和包含 ng-app 指令的 div 一起使用。
然後，ng-bind 使用 name 模型在 HTML <span> 標籤中顯示，無論何時使用者在文字框中輸入內容。
關閉 </div> 標籤表示 AngularJS 應用的結束。

列印頁面