AngularJs學習第一章（來自angularJS菜鳥教程）

時間 2019-11-12

標籤 angularjs 學習第一章來自菜鳥教程欄目 AngularJS 简体版

原文原文鏈接

AngularJS是一個JavaScript框架，它能夠經過<script>標籤添加到HTML頁面。是一個JavaScript編寫的庫html

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

最好放在<body>元素的底部這樣會提升網頁加載速度，由於HTML加載不受制於腳本加載。框架

AngularJs擴展了HTML--四大指令spa

1.Angular 經過ng-dircctives擴展了HTMLcode

2.ng-app指令定義一個AngularJs應用程序cdn

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

4.ng-bind指令把應用程序綁定到HTML視圖ip

例子：utf-8

<!DOCTYPE html>

<html>

<head>

</head>

<body>

　　<h1>Hello {{name}}</h1> </div>

</body>

實例講解：

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

　　ng-app 指令告訴ANjularJS<div>元素AnjularJS應用程序的「 全部者」

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

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

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

什麼是AnjularJS？　　

AnjularJS使得如今的單一頁面應用程序(SPAs:Single Page Applications )變得更加容易。

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

　　AnjularJS能夠克隆和重複HTML元素

　　AnjularJS能夠隱藏和顯示HTML元素

　　AnjularJS能夠在HTML元素「背後」添加代碼

　　AnjularJS能夠支持輸入驗證

AnjularJS指令：

　　AngularJS是以 ng做爲前綴的 HTML屬性

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

<!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="" ng-init="furstName = '楊芬'">
<p>姓名爲：<span ng-bind = "furstName"></span></p>
</div>
</body>
</html>input

運行結果：

　　姓名爲：楊芬

注意：HTML5容許擴展的（自制的）屬性，以data開頭。

　　AngularJS屬性容許以ng-開頭可是能夠使用data-ng-來讓網頁對HTML5有效

<!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></body></html>