首頁 > 開發者 > JavaScript
AngularJS 教程及執行個體代碼，angularjs執行個體代碼
angularjs 簡介
AngularJS 是一個 JavaScript 架構。它可通過 <script> 標籤添加到 HTML 頁面。
AngularJS 通過 指令 擴充了 HTML，且通過 運算式 綁定資料到 HTML。
AngularJS 是一個 JavaScript 架構
AngularJS 是一個 JavaScript 架構。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 檔案形式發布的，可通過 script 標籤添加到網頁中：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
Note 我們建議把指令碼放在 <body> 元素的底部。
這會提高網頁載入速度，因為 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> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1></div></body></html>
執行個體講解：
當網頁載入完畢，AngularJS 自動開啟。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程式 的"所有者"。
ng-model 指令把輸入欄位的值綁定到應用程式變數 name。
ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。
Note 如果您移除了 ng-app 指令，HTML 將直接把運算式顯示出來，不會去計算運算式的結果。
什麼是 AngularJS？
AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作為首碼的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程式變數。
AngularJS 執行個體
<div ng-app="" ng-init="firstName='John'"><p>姓名為 <span ng-bind="firstName"></span></p></div>
Note HTML5 允許擴充的（自製的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
帶有有效 HTML5：
AngularJS 執行個體
<div data-ng-app="" data-ng-init="firstName='John'"><p>姓名為 <span data-ng-bind="firstName"></span></p></div>
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><div ng-app=""> <p>我的第一個運算式： {{ 5 + 5 }}</p></div></body></html>
AngularJS 應用
AngularJS 模組（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
AngularJS 執行個體
<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</div><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 簡介及執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
