AngularJs學習筆記一

時間 2019-12-14

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

原文原文鏈接

一：什麼是angularJs？javascript

基於javascript開發的客戶端應用框架，使咱們能夠更加快捷，簡單的開發web應用。
誕生於2009年，後來被google收購，用在了不少項目中。
適用於CRUD應用或者SPA單頁面網站的開發。

angularJs資源html

http://www.angularjs.org/java

https://www.github.com/angular/node

http://www.angularjs.cn/git

http://www.ngnice.com/angularjs

http://woxx.sinaapp.com/github

angularJs下載 web

http://www.bootcdn.cn/angular.js/npm

若是安裝了nodejs，能夠用cmd命令安裝下載：npm install angular json

angularJs有哪些特性？

MVC模式
模塊系統
指令系統
依賴注入
雙向數據綁定

注：如下教程是針對1.3.0的版本

2、angularJs的MVC方式

數據的掛載
ng-controller
雙大括號表達式

angularJs的做用域

$scope 局部做用域
$rootScope 全局做用域
依賴注入服務

利用ng-app引入，用ng-controller控制，html裏面引入用雙大括號

頭部

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>

js中

function Aaa($scope){
    $scope.name = 'hello';
    $scope.age = '20';
}

html

<div ng-controller="Aaa">
    <p>{{name}}</p>
 </div>

模板

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 function Aaa($scope){
 9     $scope.name = 'hello';
10     $scope.age = '20';
11 }
12 </script>
13 </head>
14 
15 <body>
16 <div ng-controller="Aaa">
17     <p>{{name}}</p>
18  </div>
19 </body>
20 </html>

3、簡介指令與雙向數據綁定

angularJs的指令系統

ng-app 初始化指令能夠加在標籤上
ng-controller 鏈接數據和視圖的指令

angularJs的雙向數據綁定

MVVM M數據 v視圖數據會影響視圖視圖變化會影響數據
$timeout 定時器須要在參數中定義
ng-click
ng-model

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 
 9 function Aaa($scope,$timeout){
10     $scope.name = 'hello';
11     $timeout(function(){
12         $scope.name = 'hi';
13     },2000);
14     $scope.show = function(){
15         $scope.name = 'hi';
16     };
17 }
18 </script>
19 </head>
20 
21 <body>
22 <!--<div ng-controller="Aaa" ng-click="name='hi'">-->
23 <div ng-controller="Aaa" ng-click="show()">
24     <p>{{name}}</p>
25 </div>
26 </body>
27 </html>

ng-model

<script>
function Aaa($scope,$timeout){
    $scope.name = 'hello';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name">
    <p>{{name}}</p>
</div>

4、購物金額實例操做

購物金額計算
過濾器 currency 貨幣格式化
$watch 監聽數據變化三個參數 true可選參數針對集合進行監聽除了監聽參數還能夠監聽函數

$scope.$watch('iphone.money',function(newVal,oldVal){
        
    },true)

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 function Aaa($scope,$timeout){
 9     $scope.iphone = {
10         money : 5,
11         num : 1,
12         fre : 10
13     };
14     $scope.sum = function(){
15         return $scope.iphone.money * $scope.iphone.num;
16     };
17     /*$scope.$watch('iphone.money',function(newVal,oldVal){
18         console.log(newVal);
19         console.log(oldVal);
20     },true);*/
21     $scope.$watch($scope.sum,function(newVal,oldVal){
22         //console.log(newVal);
23         //console.log(oldVal);
24         $scope.iphone.fre = newVal >= 100 ? 0 : 10; //費用超過100運費爲0
25     });
26 }
27 </script>
28 </head>
29 <body>
30 <div ng-controller="Aaa">
31     <p>價格:<input type="text" ng-model="iphone.money"></p>
32     <p>個數:<input type="text" ng-model="iphone.num"></p>
33     <p>費用:<span>{{ sum() | currency:'￥' }}</span></p>
34     <p>運費:<span>{{iphone.fre | currency:'￥'}}</span></p>
35     <p>總額:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>
36 </div>
37 </body>
38 </html>

5、angularJs中的模塊化操做

angularJs的模塊化

angular.module
壓縮的問題

普通模塊寫法

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',function($scope){
    $scope.name = 'hello';
});
m1.controller('Bbb',function($scope){
    $scope.name = 'hi';
});

進化模塊寫法 （解決壓縮問題）

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'hello';
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'hi';
}]);

其中頭部首先須要引用模塊名字

<html ng-app="myApp">

第一個普通模塊開發的版本是能夠的，可是上線進行壓縮處理時候局部做用域$scope會出問題找不到可能會被壓縮成$,因此推薦用進化的寫法數組的寫法更好。

angularJs的工具方法

angular.bind
angular.copy
angular.extend

angular.bind(); -> $.proxy() : 改this指向

function show(n1,n2){
    alert(n1);
    alert(n2);
    alert(this);//指向window
}
普通寫法
 angular.bind(document,show)();
 傳參寫法
angular.bind(document,show,3)(4);

angular.copy();  //拷貝對象

var a = {
    name : 'hello'
};
var b = {
    age : '20'
};
 var c = angular.copy(a);    //a把全部值給了c
var c = angular.copy(a,b);   //a把全部值覆蓋給了b 此時b=hello

angular.extend();   //對象繼承

var a = {
    name : 'hello'
};
var b = {
    age : '20'
};
var c = angular.extend(b,a); //b=c=20,a=hello

6、anglarJs中的工具方法

angular.isArray 判斷參數是不是數組是返回true
angular.isDate 是不是時間對象
angular.isDefined 判斷一個元素存在
angular.isUndefined 不存在
angular.isFunction 判斷是否是函數
angular.isNumber 判斷是否是數字
angular.isObject 判斷是否是對象
angular.isString 判斷是否是字符串
angular.isElement 判斷是否是元素
angular.version
angular.equals
angular.forEach
angular.fromJson/toJson
angular.identity/noop
angular.lowercase/uppercase
angular.element
angular.bootstrap
angular.injector

8、angular.module 建立模塊

$scope

$scope.$watch
$scope.$apply

angular.module

controller
run

注：模塊下面不止run和controller還有不少操做方法

controller的使用方法

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp" >
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 
 6 <title>無標題文檔</title>
 7     <script src="angular.min.js"></script>
 8 <script>
 9     var m1 = angular.module('myApp',[]); 10  m1.controller('Aaa',function($scope){ 11  $scope.name = 'hello'; 12  }) 13  m1.controller('Bbb',function($scope){ 14  $scope.name = 'hi'; 15  }) 16 </script>
17 </head>
18 <body>
19 <div ng-controller="Aaa">
20     <p>{{name}}</p>
21 </div>
22 <div ng-controller="Bbb">
23     <p>{{name}}</p>
24 </div>
25 
26 </body>
27 </html>

其中頭部要加代碼引入模塊

<html ng-app="myApp" >

run的使用方法

run的做用至關於初始化全局數據，而後把值在裏面進行掛載操做，不須要建立再引用控制器

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp" >
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6     <script src="angular.min.js"></script>
 7 <script>
 8     var m1 = angular.module('myApp',[]);  9  m1.run(['$rootScope',function($rootScope){ 10  $rootScope.name = 'hello'; 11  }]) 12 </script>
13 </head>
14 <body>
15 <div>
16     <p>{{name}}</p>
17 </div>
18 </body>
19 </html>

若是進行局部做用域於時會報錯的，因此run沒有局部做用域，controller能夠至關於局部做用域

 m1.run(['$scope',function($scope){ $scope.name = 'hello'; }]) //不會打印出來hello

九.angularJs的過濾器

currency 貨幣金額過濾器
number 文字轉化成數字
lowercase/uppercase 大小寫轉換
json 格式化數據格式，讓其更加工整
limitTo 截取數組字符串
date 日期時間格式化，以毫秒計算
orderBy 對數組排序，可是有格式限制
filter 過濾

  <script>
        var m1 = angular.module('myApp',[]); m1.controller('Aaa',function($scope){ $scope.name = '7755.22000222'; }) </script>

currency 貨幣金額過濾器

 <p>{{name | currency}}</p> //$7,755.22

加個分隔符豎線寫上currency，默認美圓貨幣符號 ,經過後面加個冒號修改貨幣符號

 <p>{{name | currency:"￥"}}</p> //￥7,755.22

 <p>{{name | number}}</p>  //7,755.220

會把文字轉化成數字，比方加上數字千分位分隔符，默認寫小數點會保留小數點後三位，經過加加參數改變保留位數

 <p>{{name | number:5}}</p> //7,755.22000

 <p>{{name | uppercase}}</p> //hello 會轉換成HELLO

json的用法

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>json用法</title>
 6     <script src="angular.min.js"></script>
 7     <script>
 8         var m1 = angular.module('myApp',[]);  9  m1.controller('Aaa',function($scope){ 10  $scope.name = {"name":"hello","age":"22"}; 11            /*
12  不加json打印出 13  {"name":"hello","age":"22"} 14  加json打印出 15  { 16  "name": "hello", 17  "age": "22" 18  } 19  格式更加工整 20  <pre> 標籤是來定義預格式化的文本。被包圍在 pre 元素中的文本會保留空格和換行符 21           */
22  }) 23     </script>
24 </head>
25 <body>
26 <div ng-controller="Aaa">
27  <pre> <p>{{name|json}}</p></pre>
28 </div>
29 </body>
30 </html>

limitTo的用法

 $scope.name ="hello"; //he
 $scope.name=['a','b','c','d'] //["a","b"] 
    
  <p>{{name|limitTo:2}}</p>

date的用法

  $scope.name ="13344444"; //Jan 1, 1970
    <p>{{name|date}}</p>

格式能夠用參數調整,參數很是多，可從API上查找

 <p>{{name|date:'fullDate'}}</p> // Thursday, January 1, 1970

orderBy的用法

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>json用法</title>
    <script src="angular.min.js"></script>
    <script>
        var m1 = angular.module('myApp',[]); m1.controller('Aaa',function($scope){ $scope.name=[ {name:"heem",age:"33"}, {name:"asd",age:"13"}, {name:"dddf",age:"43"}, {name:"ggg",age:"83"} ] //age排序 [{"name":"asd","age":"13"},{"name":"heem","age":"33"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"}] 數字從小到大
            //name排序 [{"name":"asd","age":"13"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"},{"name":"heem","age":"33"}] 字母a-z
            //參數true 進行逆排序 [{"name":"ggg","age":"83"},{"name":"dddf","age":"43"},{"name":"heem","age":"33"},{"name":"asd","age":"13"}]
 }) </script>
</head>
<body>
<div ng-controller="Aaa">
    <p>{{ name | orderBy : 'age' : true }}</p>
</div>
</body>
</html>

filter的用法

<p>{{ name | filter : 'asd'}}</p> // 保留下來[{"name":"asd","age":"13"}]剩下的被過濾掉都是都是針對數據值

<p>{{ name | filter : '3'}}</p>  //[{"name":"heem","age":"33"},{"name":"asd","age":"13"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"}] 只要包含就會篩選出來

<p>{{ name | filter : 'asd':true}}</p>//true匹配完整的[{"name":"asd","age":"13"}]

十.過濾器擴展及自定義過濾器

過濾器能夠組合使用 經過分隔符豎線來鏈接

  $scope.name='heelo' 

 <p>{{ name | limitTo : 2 | uppercase}}</p> // HE 截取2個字符而且轉化成大寫

除了在表達式操做過濾器也能夠在js裏面操做過濾器，能夠經過依賴注入的方式來實現

JS中使用過濾器

$scope/$rootScope/$timeout
$filter

寫法操做格式以下：

m1.controller('Aaa',['$scope','$filter',function($scope,$filter){

$scope.name = $filter('uppercase')('hello'); //HELLO 轉大寫

}]);

注入$scope','$filter ，而後在function裏面寫上參數。
數字過濾

 $scope.name = $filter('number')('12342256');//12,342,256
 $scope.name = $filter('number')('12342256.11111111',3);//保留小數點三位 在後面進行限制傳參 12,342,256.111

自定義過濾器

controller/run
filter

注：經過angular.module下的方法filter進行自定義，angular.module下面前面講過還有controller和run方法

自定義首字母大寫的過濾功能

由於在filter是在模塊下的方法，因此要在model下進行自定義函數

  m1.filter('firstUpper',function(){ return function(str){ // console.log(str) //str=hello 
                return str.charAt(0).toUpperCase() + str.substring(1); } })

在下面引用

 <p>{{ name | firstUpper}}</p>

若是想傳參能夠繼續加個參數如傳個num

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>自定義</title>
 6     <script src="angular.min.js"></script>
 7     <script>
 8         var m1 = angular.module('myApp',[]);  9  m1.filter('firstUpper',function(){ 10             return function(str,num){ 11                // console.log(str) //str=hello
12  console.log(num) //num=5 
13                 return str.charAt(0).toUpperCase() + str.substring(1); 14  } 15  }) 16  m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ 17  $scope.name = 'hello'; //Hello
18 
19  }]) 20     </script>
21 </head>
22 <body>
23 <div ng-controller="Aaa">
24     <p>{{ name | firstUpper:5}}</p>
25 </div>
26 </body>
27 </html>

以上是在表達式中進行使用，也能夠在js使用

 $scope.name = $filter('firstUpper')('hello'); //Hello <p>{{ name }}</p>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。