標籤：講解 bin 4.6 r.js 應用程式 uri script 使用 inner
一、 什麼是 AngularJS？AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。
AngularJS 是一個 JavaScript 架構。它可通過 <script> 標籤添加到 HTML 頁面。
AngularJS 通過 指令 擴充了 HTML，且通過 運算式 綁定資料到 HTML。
AngularJS 是一個 JavaScript 架構AngularJS 是一個 JavaScript 架構。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 檔案形式發布的，可通過 script 標籤添加到網頁中：
各個 angular.js 版本下載： https://github.com/angular/angular.js/releases
二、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。
三、AngularJS 指令正如您所看到的，AngularJS 指令是以 ng 作為首碼的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程式變數。
AngularJS 執行個體<div ng-app="" ng-init="firstName=‘John‘">
<p>姓名為
<span ng-bind="firstName">
</span>
</p>
</div>
|
帶有有效 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 }}
<!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初識
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
