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

AngularJS 教學及實例程式碼分析

小云云
發布: 2018-01-04 09:32:23
原創
1344 人瀏覽過

本文主要跟大家介紹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模糊查詢功能實作程式碼

AngularJS 實作購物車全選反選功能實例分享

AngularJS實作輸入框字數限制提醒功能

以上是AngularJS 教學及實例程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板