JavaScript強化教程——AngularJS

時間 2021-01-02

標籤 html git github app 框架 ide spa orm htm 教程欄目 JavaScript 简体版

原文原文鏈接

本文爲 H5EDU 機構官方 HTML5培訓教程，主要介紹：JavaScript強化教程 —— AngularJS

AngularJS 簡介

AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面。

AngularJS 經過指令擴展了 HTML，且經過表達式綁定數據到 HTML。

AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中：<script src="http://apps.bdimg.com/libs/ang ... gt%3B[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://apps.bdimg.com/libs/ang ... gt%3B
</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 把應用程序數據綁定到 HTML 元素。
AngularJS 能夠克隆和重複 HTML 元素。
AngularJS 能夠隱藏和顯示 HTML 元素。
AngularJS 能夠在 HTML 元素"背後"添加代碼。
AngularJS 支持輸入驗證。html