首頁 > 文章 > web前端 > AngularJS 教學及實例程式碼分析

AngularJS 教學及實例程式碼分析

小云云原創: 2018-01-04 09:32:231310瀏覽

本文主要跟大家介紹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=&#39;John&#39;">
<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=&#39;John&#39;">
<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 教學及實例程式碼分析

相關文章