首頁 > web前端 > js教程 > 創建你的第一個AngularJS應用的方法_AngularJS

創建你的第一個AngularJS應用的方法_AngularJS

WBOY
發布: 2016-05-16 15:54:44
原創
1131 人瀏覽過

 依照以下步驟來建立AngularJS應用
第1步:載入框架

作為一個純粹的JavaScript框架,它可以使用<script>標籤來添加。 </script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

登入後複製

輸出

在網頁瀏覽器開啟textAngularJS.html。請輸入姓名並看到的結果。

2015616114947849.png (611×329)

 如何讓AngularJS與HTML整合

  •     ng-app指令指示AngularJS應用的開始。
  •     ng-model指令建立一個名為「name」的模型變數在HTML頁面中,並有ng-app指令在div內使用。
  •     ng-bind使用模型名稱只要在文字方塊中使用者輸入的東西顯示在HTML span標籤上。
  •     結束 div>標記表示AngularJS應用程式的結束。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板