本文主要跟大家介紹angularjs 的相關知識，有興趣的朋友一起看看吧。 AngularJS 透過新的屬性和表達式擴展了 HTML。 AngularJS 可以建立一個單一頁面應用程式（SPAs：Single Page Applications）。
angularjs 簡介
AngularJS 是一個 JavaScript 框架。它可透過 <script> 標籤新增至 HTML 頁面。 </p>
<p>AngularJS 透過 指令 擴充了 HTML，且透過 表達式 綁定資料到 HTML。 </p>
<p>AngularJS 是一個 JavaScript 框架</p>
<p>AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的函式庫。 </p>
<p>AngularJS 是以JavaScript 檔案形式發佈的，可透過script 標籤新增至網頁：</p>
<p><script src="http://cdn.static.runoob.com/libs /angular.js/1.4.6/angular.min.js"></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 實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</p>
</body>
</html>登入後複製
實例講解：
#當網頁載入完畢，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 ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</p>
登入後複製
Note HTML5 允許擴充的（自製的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
有有效的HTML5：
AngularJS 實例
<p data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</p>
登入後複製
AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression } }。
AngularJS 表達式把資料綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"資料。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算子和變數。
實例{{ 5 + 5 }} 或{{ firstName + " " + lastName }}
AngularJS 實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</p>
</body>
</html>登入後複製
AngularJS 應用程式
#AngularJS 模組（Module） 定義了AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
AngularJS 實例
<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', 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中文網其他相關文章！
