AngularJs

時間 2019-11-29

原文原文鏈接

參考：http://www.runoob.com/angularjs/angularjs-intro.html javascript

http://angularjs.cn/A00nhtml

AngularJs是一個爲動態web設計應用的框架。它能讓你使用html做爲模板語言，經過拓展html的語法，讓你更清楚，簡潔的創建你的應用組件，它的創新點在於，利用「數據綁定」和「依賴注入」 它使你再也不寫大量的代碼。這些全都經過瀏覽器端的javascript實現，這也使得它可以完美的和任何服務器端技術結合。
java

AngularJS 是一個 JavaScript 框架

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

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

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

**咱們建議把腳本放在 <body> 元素的底部。
**這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。express

AngularJS 擴展了 HTML瀏覽器

AngularJS 經過 ng-directives 擴展了 HTML。服務器

ng-app 指令定義一個 AngularJS 應用程序。app

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。框架

ng-bind 指令把應用程序數據綁定到 HTML 視圖。

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>

實例講解：

當網頁加載完畢，AngularJS 自動開啓。

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。

ng-model 指令把輸入域的值綁定到應用程序變量 name。

ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。

**若是您移除了 ng-app 指令，HTML 將直接把表達式顯示出來，不會去計算表達式的結果

運行結果以下：很好是我輸入進去測試的

什麼是 AngularJS？

AngularJS 是專門爲應用程序設計的 HTML。

AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。

AngularJS 把應用程序數據綁定到 HTML 元素。

AngularJS 能夠克隆和重複 HTML 元素。
AngularJS 能夠隱藏和顯示 HTML 元素。
AngularJS 能夠在 HTML 元素"背後"添加代碼。
AngularJS 支持輸入驗證。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 做爲前綴的 HTML 屬性。

ng-init 指令初始化 AngularJS 應用程序變量。

<div ng-app="" ng-init="firstName='John'">

<p>姓名爲 <span ng-bind="firstName"></span></p>

</div>

AngularJS 表達式

AngularJS 表達式寫在雙大括號內：{{ expression }}。

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>個人第一個表達式： {{ 5 + 5 }}</p>
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。