學習筆記_AngularJS

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>

});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章