手机版
你好,游客 登录 注册
背景:
阅读新闻

AngularJS 初步认识

[日期:2016-08-11] 来源:Linux社区  作者:giggle [字体: ]

一、前言

早已听说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>
        <metacharset="utf-8"/>
        <scriptsrc="angular.js"></script>
    </head>
    <bodyng-app>
        <inputtype="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>

好了,就先暂且探到这儿吧。

一些AngularJS相关文章链接

AngularJS权威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜欢,并分享我的工作~带你走近AngularJS系列

  1. 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的详细介绍请点这里
AngularJS 的下载地址请点这里

本文永久更新链接地址http://www.linuxidc.com/Linux/2016-08/134158.htm

linux
相关资讯       AngularJS 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款