AngularJS 教學及實例程式碼分析

本文主要跟大家介紹angularjs 的相關知識，有興趣的朋友一起看看吧。 AngularJS 透過新的屬性和表達式擴展了 HTML。 AngularJS 可以建立一個單一頁面應用程式（SPAs：Single Page Applications）。

angularjs 簡介

AngularJS 是一個 JavaScript 框架。它可透過 <script> 標籤新增至 HTML 頁面。 </script>

AngularJS 透過 指令 擴充了 HTML，且透過 表達式 綁定資料到 HTML。

AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的函式庫。

AngularJS 是以JavaScript 檔案形式發佈的，可透過script 標籤新增至網頁：

Note 我們建議把腳本放在

元素的底部。

這會提高網頁載入速度，因為 HTML 載入不受制於腳本載入。

各個angular.js 版本下載：https://github.com/angular/angular.js/releases

AngularJS 擴充了HTML

##AngularJS 透過ng-directives 擴充了HTML。

ng-app 指令定義一個 AngularJS 應用程式。

ng-model 指令把元素值（例如輸入域的值）綁定到應用程式。

ng-bind 指令把應用程式資料綁定到 HTML 視圖。

AngularJS 實例

nbsp;html>


<meta>
<script></script>

 
<p>
  </p><p>名字 : <input></p>
  <h1 id="Hello-name">Hello {{name}}</h1>

實例講解：

#當網頁載入完畢，AngularJS 自動開啟。

ng-app 指令告訴 AngularJS，

元素是 AngularJS 應用程式 的"所有者"。

ng-model 指令把輸入域的值綁定到應用程式變數 name。

ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。

Note 如果您移除了 ng-app 指令，HTML 會直接把表達式顯示出來，不會去計算表達式的結果。

什麼是 AngularJS？

AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。

• AngularJS 把應用程式資料綁定到 HTML 元素。

• AngularJS 可以複製和重複 HTML 元素。

• AngularJS 可以隱藏並顯示 HTML 元素。

• AngularJS 可以在 HTML 元素"背後"新增程式碼。

• AngularJS 支援輸入驗證。

AngularJS 指令

如您所看到的，AngularJS 指令是以 ng 作為前綴的 HTML 屬性。

ng-init 指令初始化 AngularJS 應用程式變數。

AngularJS 實例

<p>
</p><p>姓名为 <span></span></p>

Note HTML5 允許擴充的（自製的）屬性，以 data- 開頭。

AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。

有有效的HTML5：

AngularJS 實例

<p>
</p><p>姓名为 <span></span></p>

AngularJS 表達式

AngularJS 表達式寫在雙大括號內：{{ expression } }。

AngularJS 表達式把資料綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。

AngularJS 將在表達式書寫的位置"輸出"資料。

AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算子和變數。

實例{{ 5 + 5 }} 或{{ firstName + " " + lastName }}

AngularJS 實例

nbsp;html>


<meta>
<script></script> 


<p>
  </p><p>我的第一个表达式： {{ 5 + 5 }}</p>

AngularJS 應用程式

#AngularJS 模組（Module） 定義了AngularJS 應用。

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。

ng-app指令定義了應用, ng-controller 定義了控制器。

AngularJS 實例

<p>
名: <input><br>
姓: <input><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS 模組定義應用:

AngularJS 模組

var app = angular.module('myApp', []);

AngularJS 控制器控制應用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

相關推薦：

AngularJS模糊查詢功能實作程式碼

AngularJS 實作購物車全選反選功能實例分享

AngularJS實作輸入框字數限制提醒功能

以上是AngularJS 教學及實例程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！