你的位置:首页 > Java教程

[Java教程]初探AngularJS


一、前言

早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过。由于,在下个版本项目中需要用到AngularJS,so,那就一起再来研究研究呗。

说到,这个AngularJS,其核心就是对HTML标签的增强。

何为HTML标签增强?

其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。

至于说AngularJS是MVC,亦或MVVM框架?

都不是,它是MVW,最后的W意思就是说whatever,固有些人也称其为MV*。其中含义,以后实践久了,应该就豁然开朗了,至于现在,move on吧。

二、一切从hello world开始

啊,苍茫的天涯是我的爱,绵绵的青山脚下花会开,什么样的节奏是最呀最摇摆,什么样的歌声才是最开怀~~~

现在这个年代,人非草木,什么都得有情怀,不然还混不下去了。所以,接下来我们编写个小demo,来抒发我们的抱负。

这个demo要实现的功能很简单,就是在input框中,输入自定义内容,如hello world,间接改变另一显示区域。

前提:如若没有angular.js文件,请点击这里(here)。

实现代码如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app>    <input type="text" ng-model="custom"/>    <h1>{{custom}}</h1>  </body></html>

效果图:

 

怎么样,是八是很惊奇,仅仅用了这几行代码,就实现了这个效果,倘若利用原生代码实现,我们还得监听input框,值若改变,取值,将其动态插入h1中。

啧啧啧,相对于AngularJS显得稍稍笨重了许多,所以这也体现了AngularJS的优点,适合数据操作多的应用。

在“前言”中,我们已经提到,AngularJS其核心就是对HTML标签的增强,且内置的Angular指令是以ng-开头的,如上述代码中的ng-app以及ng-model。

  --ng-app指令声明所有被其包含的内容都属于angularjs应用

  --ng-model指令将内部$scope的属性名绑定到input框中,从而实现双向绑定。

好了,倘若我想给上述input框一个默认值 ’hello world’ 呢?在value=’hello world’?

噗,No。因为我们在body已用ng-app指令表示在body中都属于angular应用啦,so

<input type='text' ng-model='custom' value='hello world'/>

是不起作用滴,不过可以利用angular内置指令ng-init来达到我们想要的效果。

代码如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app>    <input type="text" ng-model="custom" ng-init="custom='hello world'"/>    <h1>{{custom}}</h1>  </body></html>

除开这种便捷的方法,我们还可以利用控制器来实现同样的效果。

如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app>    <input type="text" ng-model="custom" ng-controller="customController"/>    <h1>{{custom}}</h1>    <script>      function customController($scope){        $scope.custom = 'hello world';      }    </script>  </body></html>

效果图如下:

尼玛,怎么不是我们想要的效果?!!

细看代码,发现,我们将控制器customController写在input中的,固出现上述状况。

你可能会问,这是为什么呢?-.-小沈阳附体

因为诸如ng-app、ng-controller这些标签,他们都会创建一个作用域,这个作用域呢,又是以html标签来划分的。如<body ng-app>,那么它所创建的作用域($rootScope),就是在body中生效,即</body>止。如上述代码,我们将控制器customController写在input中,那么这个子作用域就是在input中,<h1>标签中的{{custom}}是获取不到的。

好了,了解了原因,我们修改上述代码,如下,将customController控制器放到body中,即可。

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app ng-controller="customController">    <input type="text" ng-model="custom"/>    <h1>{{custom}}</h1>    <script>      function customController($scope){        $scope.custom = 'hello world';      }    </script>  </body></html>

完美!

咦,函数customController中参数$scope什么鬼,我们调用时并没有传入呢。这就涉及到Angular的另一核心特效依赖注入,我们现在先不管他内部原理如何实现的,大概过程就是将预定义好的对象名与具体操作绑定,我们使用时,在参数中调用即可,且注入名字必须与预定义的对象一样,不然会报错。另,$scope对象属于Angular内置对象,代表对应的作用域管理对象。

上述代码中,再细细看来,还是不好呢。我们将控制器写在了全局对象中,虽然不影响代码运行,但不易于维护嘛,好在Angular允许我们使用angular.module方法来声明模块。

该方法接收两个参数,第一个是模块的名称,第二个是依赖列表。利用angular.module修改上述代码,得下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app='myApp' ng-controller="customController">    <input type="text" ng-model="custom"/>    <h1>{{custom}}</h1>    <script>      var myApp = angular.module('myApp', []);      myApp.controller('customController', function($scope){        $scope.custom = 'hello world';      });    </script>  </body></html>

效果图如下:

三、scope作用域

AngularJS 应用启动并生成视图时,会将根 ng-app 元素与 $rootScope 进行绑定,$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS 应用中的全局作用域对象,所以为它附加太多逻辑或者变量并不是一个好主意,和污染 Javascript 全局作用域是一样的。通过诸如控制器、指令等这些命令,我们可以创建子作用域,所有的子作用域都通过原型继承而来(指令的孤立作用域除外),也就是说它们都可以访问父级作用域。

好了,我们通过编写个demo感受一番:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app='myApp'>    rootScope:{{name}}    <div ng-controller="outterController">      outter:{{name}}      <div ng-controller="innerController">        inner:{{name}}      </div>          </div>    <script>      var myApp = angular.module('myApp', []);      myApp.run(function($rootScope){        $rootScope.name = 'rootScope';        }).controller('outterController', function($scope, $timeout){        $timeout(function(){          $scope.name = 'outter';        }, 1000);      }).controller('innerController', function($scope, $timeout){        $timeout(function(){          $scope.name = 'inner';        }, 2000);      });    </script>  </body></html>

代码稍多,请自行打开

 效果图如下:

 

四、过滤器

Angular过滤器用来格式化需要展示给用户的数据,通过 | 符号来达到过滤效果。

假设我们需要在将一个数字过滤,让他保留两位小数,可以这么做:

{{124.567 | number:2}}//124.57{{124 | number:2}}//124.00

并且,我们可以使用多个filter连用,上一个filter的输出结果将作为下一个filter的输入,如:

{{ expression | filter1 | filter2| … }}

上述代码中的number为Angular的内置过滤器。如果我们需要传递参数给过滤器,只要在过滤器名字后面加冒号即可。如果有多个参数,可以在每个参数后面都加入冒号。

Angular内置的过滤器有:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序),总共九种,除此之外还可以自定义过滤器,这样,我们就可以满足任何要求的数据处理啦。

下面先列举几个常用的内置过滤器,抛砖引玉,大家一同感受下。

1、  filter

filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。该过滤器有两个参数,第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。下面一一介绍:

--字符串--

返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素,在参数前面加 !符号即可。

如下:

{{['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'!e'}}

--对象--

AngularJS会将待过滤对象的属性同这个对象中的属性名进行一一比较,如果过滤对象的属性包含这个属性名,则出现在新的数组中并返回。

如下:

{{[{'name': 'Ari',  'age': 3  },
{ 'name': 'Nate', 'age': 33 }] | filter: {'age': 3} }}

--函数--

对每个元素都执行这个函数,返回非假值得元素会出现在新的数组中并返回。

如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app='myApp'>    {{ ['Ari', 'likes', 'to', 'travel'] | filter: isCapitalized}}    <script>      var app = angular.module('myApp', []);      app.run(function($rootScope){        //isCapitalized有且仅有一个参数        $rootScope.isCapitalized = function(str){          return str[0] === str[0].toUpperCase();        };      });          </script>  </body></html>

Angular过滤器的第二个参数,可以是true。

--true--

对比较值进行,严格比较,如下:

{{ ['Ari', 'likes', 'to', 'travel', 'e'] | filter: 'e' : true}}

2、  number

number过滤器将数字格式化成文本,可以为一个数字加上千位分割符,如12345变为12,345。它的参数是可选的,用来控制小数点后的截取位数。另外,传入的是一个非数字字符,会返回空字符串。

如下:

{{12345 | number:2}}

3、  orderBy

orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app='myApp'>    <div>{{ childrenArray | orderBy : 'age' }}</div><!--按age属性值进行排序,若是-age,则倒序-->    <div>{{ childrenArray | orderBy : ['age','name'] }}</div><!--如果age相同,按照name进行排序-->    <div>{{ childrenArray | orderBy : orderFunc }}</div><!--按照函数的返回值进行排序-->    <script>      var app = angular.module('myApp', []);      app.run(function($rootScope){        $rootScope.childrenArray = [ {name:'Tom', age: 20},                       {name:'Mari', age:19},                       {name:'Ari', age: 21},                       {name:'Jack', age: 19}                                          ];        $rootScope.orderFunc = function(ele){          return [ele.age, ele.name];        }      });          </script>  </body></html>

代码稍多,请自行打开

通过上面的例子,我们对Angular内置的过滤器有了一定了解。那么,接下来,我们就一起来看看自定义过滤是如何实现的。

Angular的自定义过滤器也比较简单,使用module的filter方法,返回一个函数搞定,且该函数接收的参数值就是过滤值,最后返回处理后的结果。

如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src="angular.js"></script>  </head>  <body ng-app='myApp'>    {{ [1,2,3,4,5,6] | filterNumber}}    <script>      var app = angular.module('myApp', []);      app.filter('filterNumber', function(){        return function(input){          var arr = [],            len,            val;          if(input){            len = input.length;            while(len--){              (val = input[len]) > 3 && arr.push(val);             }          }          return arr;        }      });          </script>  </body></html>

 好了,时间不早了,今天就暂且探到这儿吧。