http://www.runoob.com/angularjs/angularjs-tutorial.html
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
簡介:
Ø AngularJS 通過 ng-directives 擴展了 HTML。
Ø AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
Ø ng-app 指令定義一個 AngularJS 應用程序。
Ø ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
Ø ng-bind 指令把應用程序數據綁定到 HTML 視圖。
Ø ng-controller 定義了控制器。
表達式:
Ø AngularJS 表達式寫在雙大括號內:{{ expression }}。
Ø AngularJS 表達式把數據綁定到 HTML,這與 ng-bind 指令有異曲同工之妙。
Ø AngularJS 對象就像 JavaScript 對象:
<divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}"></div>
Ø AngularJS 數組就像 JavaScript 數組: ng-init="points=[1,15,19,2,40]"
AngularJS 指令:
Ø ng-repeat 指令會重複一個 HTML 元素:
<div ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<ling-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Ø ng-repeat 指令用在一個對象數組上。
Ø 創建自定義的指令
除了 AngularJS 內置的指令外,我們還可以創建自定義指令。
你可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令,HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令,runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:。
調用方式:元素名,屬性,類名,註釋
Ø 你可以限制你的指令只能通過特定的方式來調用。
通過添加 restrict屬性,並設置只值爲 "A", 來設置指令只能通過屬性的方式來調用:
Scope(作用域)
Ø 當你在 AngularJS創建控制器時,你可以將 $scope 對象當作一個參數傳遞
Ø 所有的應用都有一個$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
過濾器
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
<div ng-app="myApp"ng-controller="personCtrl">
<p>姓名爲 {{lastName | uppercase }}</p>
</div>
服務(Service)
Ø $location 服務,它可以返回當前頁面的 URL 地址。$location.absUrl();
注意 $location 服務是作爲一個參數傳遞到 controller 中。如果要使用它,需要在 controller 中定義。
var app = angular.module('myApp', []);
app.controller('customersCtrl',function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Ø $http 是 AngularJS 應用中最常用的服務。服務向服務器發送請求,應用響應服務器傳送過來的數據。
Ø AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
Ø AngularJS $interval 服務對應了 JS window.setInterval 函數。
Ø 你可以創建自定義的訪問(服務),鏈接到你的模塊中:
當你創建了自定義服務,並連接到你的應用上後,你可以在控制器,指令,過濾器或其他服務中使用它。
XMLHttpRequest
$http 是 AngularJS 中的一個核心服務,用於讀取遠程服務器的數據。
AngularJS $http 是一個用於讀取web服務器上數據的服務。
$http.get(url) 是用於讀取服務器數據的函數。
Select(選擇框)
AngularJS 可以使用數組或對象創建一個下拉列表選項。
Ø 在 AngularJS 中我們可以使用ng-option 指令來創建一個下拉列表,列表項通過對象和數組循環輸出,選項的是一個對象
Ø 我們也可以使用ng-repeat指令來創建下拉列表,選擇的值是一個字符串:
表格
Ø ng-repeat 指令可以完美的顯示錶格。
SQL
以下列出了列出了幾種服務端代碼類型:
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。返回 JSON。
使用 ASP.NET, Razor, 及 SQL Lite。返回 JSON。
HTML DOM
AngularJS 爲 HTML DOM 元素的屬性提供了綁定應用數據的指令。
Ø ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
Ø ng-show 指令隱藏或顯示一個 HTML 元素。
Ø ng-hide 指令用於隱藏或顯示 HTML 元素。
事件
Ø ng-click 指令定義了 AngularJS 點擊事件。
Ø toggle() 函數用於切換 myVar 變量的值(true 和 false)。
模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬於一個模塊。
Ø angular.module 函數來創建模塊:
表單
以下 HTML input 元素被稱爲 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
Ø formCtrl 函數設置了 master 對象的初始值,並定義了 reset() 方法。
reset() 方法設置了 user 對象等於 master 對象。
ng-click 指令調用了 reset() 方法,且在點擊按鈕時調用。
novalidate 屬性在應用中不是必須的,但是你需要在AngularJS 表單中使用,用於重寫標準的 HTML5 驗證。
輸入驗證
AngularJS ng-model 指令用於綁定輸入元素到模型中。
模型對象有兩個屬性: user 和 email。
我們使用了 ng-show指令, color:red 在郵件是 $dirty 或 $invalid 才顯示。
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
API
AngularJS 全局 API 用於執行常見任務的JavaScript 函數集合,如:
比較對象
迭代對象
轉換對象
angular.lowercase() 轉換字符串爲小寫
angular.uppercase() 轉換字符串爲大寫
angular.isString() 判斷給定的對象是否爲字符串,如果是返回 true。
angular.isNumber() 判斷給定的對象是否爲數字,如果是返回 true。
Bootstrap
AngularJS 的首選樣式表是 TwitterBootstrap, Twitter Bootstrap 是目前最受歡迎的前端框架。
<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
國內:<link rel="stylesheet"href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Scope 屬性 用途
$scope.fName 模型變量 (用戶名)
$scope.lName 模型變量 (用戶姓)
$scope.passw1 模型變量 (用戶密碼 1)
$scope.passw2 模型變量 (用戶密碼 2)
$scope.users 模型變量 (用戶的數組)
$scope.edit 當用戶點擊創建用戶時設置爲true。
$scope.error 如果 passw1 不等於 passw2 設置爲 true
$scope.incomplete 如果每個字段都爲空(length = 0)設置爲 true
$scope.editUser 設置模型變量
$scope.watch 監控模型變量
$scope.test 驗證模型變量的錯誤和完整性
包含
Ø 大多服務端腳本都支持包含文件功能 (SSI: Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件,併發送到客戶端瀏覽器。
<?phprequire("navigation.php"); ?>
Ø 通過 JavaScript有很多種方式可以在 HTML 中包含 HTML 文件。
通常我們使用 http 請求 (AJAX) 從服務端獲取數據,返回的數據我們可以通過使用 innerHTML 寫入到 HTML 元素中。
動畫
Ø AngularJS 提供了動畫效果,可以配合 CSS 使用。
Ø AngularJS 使用動畫需要引入 angular-animate.min.js 庫。
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
Ø 還需在應用中使用模型ngAnimate:
<body ng-app="ngAnimate">
依賴注入
AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作爲依賴注入:
value 一個簡單的javascript 對象,用於向控制器傳遞值(配置階段):
factory 是一個函數用於返回值。在service 和 controller 需要時創建。通常我們使用 factory 函數來計算或返回值。
service
provider 通過 provider 創建一個 service、factory等(配置階段)。Provider 中提供了一個factory 方法 get(),它用於返回 value/service/factory。
constant (常量)用來在配置階段傳遞數值,注意這個常量在配置階段是不可用的。
路由
Ø 通常我們的URL形式爲http://runoob.com/first/page,但在單頁Web應用中 AngularJS 通過 # + 標記實現
Ø AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL或者 URL 正則規則,第二個參數爲路由配置對象。
路由配置對象語法規則如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});