本文主要跟大家介紹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-model 指令把輸入域的值綁定到應用程式變數 name。 ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。 Note 如果您移除了 ng-app 指令，HTML 會直接把表達式顯示出來，不會去計算表達式的結果。 什麼是 AngularJS？ AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。<p ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </p>
<p data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </p>
<!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><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>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});以上是AngularJS 教學及實例程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
