AngularJS 學習筆記---AngularJS 簡介

時間 2019-12-24

標籤 angularjs 學習筆記簡介欄目 AngularJS 简体版

原文原文鏈接

AngularJS 簡介

http://www.runoob.com/angularjs/angularjs-intro.htmlphp

https://docs.angularjs.org/api/nghtml

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

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

AngularJS 是一個 JavaScript 框架

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

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中：express

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

各個 angular.js 版本下載： https://github.com/angular/angular.js/releasesapp

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/angular.js/1.4.6/angular.min.js"></script>
</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。

	若是您移除了 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 實例

嘗試一下 »

	HTML5 容許擴展的（自制的）屬性，以 data- 開頭。 AngularJS 屬性以 ng- 開頭，可是您能夠使用 data-ng- 來讓網頁對 HTML5 有效。

帶有有效的 HTML5：

AngularJS 實例

嘗試一下 »

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://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

嘗試一下 »

AngularJS 應用

AngularJS 模塊（Module） 定義了 AngularJS 應用。

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。

ng-app指令定義了應用, ng-controller 定義了控制器。

AngularJS 實例

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>