angularJS入門筆記_ZenDei技術網路在線

1.debug調試工具：batarang2.ng指令 1、ng-app=" " 定義angularJS的使用範圍； main方法，入口 ng-app="myModule" 2、ng-init="變數=值;變數='值'" 初始化變數的值，有多個變數時，中間用分號隔開； 3、ng-model="變數" ...

1.debug調試工具：batarang
2.ng指令
　　1、ng-app=" " 定義angularJS的使用範圍；----main方法，入口 ng-app="myModule"

　　2、ng-init="變數=值;變數='值'" 初始化變數的值，有多個變數時，中間用分號隔開；

　　3、ng-model="變數" 定義變數名；
　　　　綁定 HTML 元素到應用程式數據。
　　　　為應用程式數據提供類型驗證（number、email、required）。
　　　　為應用程式數據提供狀態（invalid、dirty、touched、error）。
　　　　為 HTML 元素提供 CSS 類。
　　　　綁定 HTML 元素到 HTML 表單。

　　4、ng-bind="變數" 綁定變數名，獲取該變數的數據。這裡的變數就是第3條的變數名。但是一般都用雙重花括弧來獲取變數的值，比如：{{變數}}。
　　5、ng-repeat 指令對於集合中（數組中）的每個項會克隆一次 HTML 元素。
　　6、directive創建自定義的指令
　　　　.directive 函數來添加自定義的指令。
　　　　要調用自定義指令，HTML 元素上需要添加自定義指令名。
　　　　　　restrict 值可以是以下幾種:
　　　　　　　　E 作為元素名使用
　　　　　　　　A 作為屬性使用
　　　　　　　　C 作為類名使用
　　　　　　　　M 作為註釋使用
　　　　　　restrict 預設值為 EA, 即可以通過元素名和屬性名來調用指令。
　　　　　　使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:★★★

1 <script>
2 var app = angular.module("myApp", []);
3 app.directive("runoobDirective", function() {
4 return {
5 restrict: 'AE',
6 template : "<h1>自定義指令!</h1>"
7 };
8 });
9 </script>

<runoob-directive></runoob-directive>

3.ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類：
　　ng-valid: 驗證通過
　　ng-invalid: 驗證失敗
　　ng-valid-[key]: 由$setValidity添加的所有驗證通過的值
　　ng-invalid-[key]: 由$setValidity添加的所有驗證失敗的值
　　ng-pristine: 控制項為初始狀態
　　ng-dirty: 控制項輸入值已變更
　　ng-touched: 控制項已失去焦點
　　ng-untouched: 控制項未失去焦點
　　ng-pending: 任何為滿足$asyncValidators的情況

<input name="myAddress" ng-model="text" required>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>

4.$scope作用域 {{變數}}
　　　　Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
　　　　Scope 是一個對象，有可用的方法和屬性。
　　　　Scope 可應用在視圖和控制器上。
　　1.當你在 AngularJS 創建控制器時，你可以將 $scope 對象當作一個參數傳遞:
　　　　app.controller('myCtrl', function($scope) {
　　　　$scope.carname = "Volvo";
　　　　});
　　2. $rootScope 根作用域
　　　　$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用。

5.控制器
在大型的應用程式中，通常是把控制器存儲在外部文件中。
只需要把 <script> 標簽中的代碼複製到名為 personController.js 的外部文件中即可：

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

6.過濾器進行數據格式化
　　過濾器可以使用一個管道字元（|）添加到表達式和指令中。
　　　　currency 格式化數字為貨幣格式。
　　　　filter 從數組項中選擇一個子集。
　　　　lowercase 格式化字元串為小寫。
　　　　orderBy 根據某個表達式排列數組。
　　　　uppercase 格式化字元串為大寫。

<p>姓名為 {{ lastName | lowercase }}</p>
<p>總價 = {{ (quantity * price) | currency }}</p>

<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>

<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

　　自定義過濾器：

姓名: {{ msg | reverse }}
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.msg = "Runoob";
    });
    app.filter('reverse', function() { //可以註入依賴
        return function(text) {    //text頁面輸入的值，（被過濾的值）
            return text.split("").reverse().join("");
        }
    });
</script>

7.服務(Service) 　　除了$scope，service在生命周期中也可以來共用數據
　　--service,provider,factory本質都是provider，只是寫法不同
　　--service都是單例的
　　--自定義的service寫在內置的service後面
　　--內置的service有$,自定義的應該避免使用$，進行區別
　　在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
　　AngularJS 內建了30 多個服務。
　　有個 $location 服務，它可以返回當前頁面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

　　$http 服務
　　　　$http 是 AngularJS 應用中最常用的服務。服務向伺服器發送請求，應用響應伺服器傳送過來的數據。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});

　　$timeout 服務
　　兩秒後顯示信息:
　　　　AngularJS $timeout 服務對應了 JS window.setTimeout 函數。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

　　$interval 服務
　　　　AngularJS $interval 服務對應了 JS window.setInterval 函數。
　　　　每一秒顯示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

創建自定義服務
　　　　創建名為hexafy 的服務:

app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});

　　　　使用自定義的的服務 hexafy 將一個數字轉換為16進位數:

app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

8.$http --XMLHttpRequest --封裝了ajax
　　簡單的 GET 請求，可以改為 POST

$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 請求成功執行代碼
$scope.names = response.data.sites;    //註：1.5一下版本沒有data
}, function errorCallback(response) {
// 請求失敗執行代碼
});

　　POST 與 GET 簡寫方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

9.select / 選擇框
　　AngularJS 可以使用數組或對象創建一個下拉列表選項。
　　　　ng-options ： <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
　　　　ng-repeat： <select><option ng-repeat="x in names">{{x}}</option>
　　　　ng-repeat 指令是通過數組來迴圈 HTML 代碼來創建下拉列表，但 ng-options 指令更適合創建下拉列表，它有以下優勢：
　　　　　　★★★使用 ng-options 的選項是一個:對象， ng-repeat 是一個:字元串。★★★
　　　　使用對象作為數據源, x 為鍵(key), y 為值(value):
　　　　　　<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
　　　　頁面下拉框初始化是空的，設置初始值方法：
　　　　　　$scope.selectedCar = $scope.cars.car02; //設置第2個為初始值；
　　　　另外一種設置初始值的方法：
　　　　　　<select ng-init="selectPerson=persons['caohui']" ng-model="selectPerson"
　　　　　　ng-options="x for (x,y) in persons">

10.表格　　 ng-repeat 指令可以完美的顯示表格。
　　顯示序號 ($index)

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

使用 $even 和 $odd

<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>

11-1.HTML DOM AngularJS 為 HTML DOM 元素的屬性提供了綁定應用數據的指令
　　ng-disabled 指令直接綁定應用程式數據到 HTML 的 disabled 屬性。
　　ng-show 指令隱藏或顯示一個 HTML 元素。
　　ng-hide 指令用於隱藏或顯示 HTML 元素。

11-2.ngAnimate /動畫
　　AngularJS 提供了動畫效果，可以配合 CSS 使用。
　　AngularJS 使用動畫需要引入 angular-animate.min.js 庫。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<body ng-app="ngAnimate">

　　ngAnimate 模型可以添加或移除 class 。
　　ngAnimate 模型並不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素，如果事件發生 ngAnimate 就會使用預定義的 class 來設置 HTML 元素的動畫。
　　AngularJS 添加/移除 class 的指令

11-3.ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類。

12.事件
　　ng-click 指令定義了 AngularJS 點擊事件。

<button ng-click="count = count + 1">點我！</button>

　　ng-dbl-click
　　ng-mousedown
　　ng-mouseenter
　　ng-mouseleave
　　ng-mousemove
　　ng-keydown
　　ng-keyup
　　ng-keypress
　　ng-change

13.模塊--module
　　模塊定義了一個應用程式。模塊是應用程式中不同部分的容器。模塊是應用控制器的容器。控制器通常屬於一個模塊。

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

app.directive("runoobDirective", function() {
return {
template : "我在指令構造器中創建!"
};
});

14.表單
　　input 元素
　　select 元素
　　button 元素
　　textarea 元素

Input 控制項使用 ng-model 指令來實現數據綁定。
　　<input type="text" ng-model="firstname">
　　　　firstname 屬性可以在 controller 中使用：
　　　　也可以在應用的其他地方使用:
　　　　　　<h1>You entered: {{firstname}}</h1>
　　Checkbox（覆選框）
　　　　checkbox 的值為 true 或 false，可以使用 ng-model 指令綁定，它的值可以用於應用中：
　　單選框
　　　　單選框使用同一個 ng-model ，可以有不同的值，但只有被選中的單選按鈕的值會被使用。
　　下拉菜單
　　　　<select ng-model="myVar">
　　　　<option value="">
　　　　<option value="dogs">Dogs
　　HTML 表單

<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>    註：：novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的預設驗證。
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});

　　下拉框初始化無預設值，或者有空白選項，影響美觀，可通過以下方法調整：
　　　　1.給定初始化信息（ng-init）
　　　　2.隱藏空白選項（ng-show="false"）

15.輸入驗證
　　屬性　　　　描述
　　$dirty 　　表單有填寫記錄
　　$valid 　　欄位內容合法的
　　$invalid 　　欄位內容是非法的
　　$pristine 　　表單沒有填寫記錄

16.API
API 　　　　　　　　　　　　描述
angular.lowercase() 　　　　轉換字元串為小寫
angular.uppercase() 　　　　轉換字元串為大寫
angular.isString() 　　　　　判斷給定的對象是否為字元串，如果是返回 true。
angular.isNumber() 　　　　判斷給定的對象是否為數字，如果是返回 true。

JSON
API 　　　　　　　　　　　　描述
angular.fromJson() 　　　　反序列化 JSON 字元串
angular.toJson() 　　　　　　序列化 JSON 字元串

比較
API 　　　　　　　　　　　　　　描述
angular.isArray() 　　　　如果引用的是數組返回 true
angular.isDate() 　　　　如果引用的是日期返回 true
angular.isDefined() 　　　如果引用的已定義返回 true
angular.isElement() 　　　如果引用的是 DOM 元素返回 true
angular.isFunction() 　　　　如果引用的是函數返回 true
angular.isNumber() 　　　　如果引用的是數字返回 true
angular.isObject()　　　　如果引用的是對象返回 true
angular.isString()　　　　　　　如果引用的是字元串返回 true
angular.isUndefined() 　　　　　如果引用的未定義返回 true
angular.equals()　　　　　　　如果兩個對象相等返回 true

17.依賴註入
　　一句話 --- 沒事你不要來找我，有事我會去找你。
　　AngularJS 提供很好的依賴註入機制。以下5個核心組件用來作為依賴註入：
　　　　value 　　　　　　 Value 是一個簡單的 javascript 對象，用於向控制器傳遞值（配置階段）：
　　　　factory 　　　　　　 factory 是一個函數用於返回值。在 service 和 controller 需要時創建。通常我們使用 factory 函數來計算或返回值。
　　　　Service
　　　　provider　　　　　　通過 provider 創建一個 service、factory等(配置階段)。Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。
　　　　constant 　　　　　　constant(常量)用來在配置階段傳遞數值，註意這個常量在配置階段是不可用的。

18.路由ng-rotue
　　$routeProvider.when(url,{
　　　　template:string, //在ng-view中插入簡單的html內容
　　　　templateUrl:string, //在ng-view中插入html模版文件
　　　　controller:string,function / array, //在當前模版上執行的controller函數
　　　　controllerAs:string, //為controller指定別名
　　　　redirectTo:string,function, //重定向的地址
　　　　resolve:object<key,function> //指定當前controller所依賴的其他模塊
　　});

angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是印表機頁面'})
.otherwise({redirectTo:'/'});
}]);

18-2.ui-route:
頁面ui-view指令

routeApp.config(function($stateProvider,$urlRouteProvider)) {
            $stateProvider
                .state('tab', {
                    url: '/tab',
                    abstract: true,
                    templateUrl: 'templates/tabs.html',
                    controller: 'TabsCtrl'
                })

            $urlRouterProvider.otherwise('/tab/home');
        }