AngularJS 教學

AngularJS 透過新的屬性和運算式擴展了 HTML。
AngularJS 可以構建一個單一頁面應用程式(SPAs:Single Page Applications)。
AngularJS 學習起來非常簡單。
每個章節都有相應的例項
在每個章節中,您可以線上編輯範例,然後點選按鈕檢視結果。
AngularJS 例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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 之前,您需要具備以下基礎知識:
- HTML
- CSS
- JavaScript
AngularJS 歷史
AngularJS 是比較新的科技,版本 1.0 是在 2012 年釋出的。
AngularJS 是由 Google 的員工 Mi?ko Hevery 從 2009 年開始著手開發。
這是一個非常好的構想,該專案目前已由 Google 正式支援,有一個全職的開發團隊繼續開發和維護這個庫。
AngularJS 例項
本教學包含了大量的 AngularJS 例項!
AngularJS 速查手冊
速查手冊包含了本教學中使用到的所有指令和過濾器。
小浪漫
139***5300@qq.com
1、ng-app=" " 定義angularJS的使用範圍;
2、ng-init="變數=值;變數='值'" 初始化變數的值,有多個變數時,中間用分號隔開;
3、ng-model="變數" 定義變數名;
4、ng-bind="變數" 繫結變數名,取得該變數的資料。這裡的變數就是第3條的變數名。但是一般都用雙重大括弧來取得變數的值,例如:{{變數}}。
小浪漫
139***5300@qq.com