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>