对于AngularJS的介绍

    随着社会的发展和不断的进步,AngularJs不断的开始吸引我们的眼球,为我们编写代码和功能的实现提供了很有效的帮助。

  AngularJs是一个用于设计动态web应用的结构框架。主要进行的是对增、删、查、改方面的功能,解除dom的操作,在底层实现dom 操作。同时,它是借鉴了MVC的理念,推出自己的实现的方法。

  有人认为它是MVC,即model view controller(模型,视图,控制器),然而有的人认为是MVVM,即(模型,视图,这里的VM是一个整体,表示:视图模型)。但是AngularJS对于游戏的开发就不行了,因为游戏存在很多dom的操作,然而它是解除dom的操作。

其中AngularJs有五个最重要的功能和特性:

  1.双向的数据绑定。

  数据绑定,使你的编写的代码可以更少,提供尽可能多的时间去做你的应用。

  这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定(例01):

    

  2.模版。

  在AngularJS中,一个模板就是一个HTML文件。

  HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

  这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

  

   

   3.MVC。

  MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

model是应用中的简单数据。viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。controller负责设置初始状态和参数化$scope方法用以控制行为。

4.服务和依赖注入。

    AngularJS拥有内建的依赖注入(DI)子系统,可以帮助开发人员更容易的开       发,理解和测试应用。

  5.指令(directive)。

    指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM                  属性。可以作为标签、属性、注释和类名使用。

这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

  

  然后,你可以使用这个自定义的directive来使用:

  <my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

对于AngularJS的特性的介绍,接下来,介绍一下它的功能。主要讲一下ng的内置过滤器的一些内容。

     1.currency (货币处理)

使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:

  {{num | currency : ‘¥‘}}

    

    2.date(日期格式化)

原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

    {{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE‘}}  

    参数用来指定所要的格式,y M d h m s E 分别表示年月日时分秒星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串,例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描          述性的字符串,个人觉得这些有点多余,我完全可以根据自己的意愿组合出想要的格式,不愿意去记这么多单词~

   3.filter(匹配子串)

这个名叫filter的filter。用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。下面举个例子说明一下参数的用法,我用现在特别火的几个孩子定义了一个数组:

  $scope.childrenArray = [

  {name:‘kimi‘,age:3},

  {name:‘cindy‘,age:4},

  {name:‘anglar‘,age:4},

  {name:‘shitou‘,age:6},

  {name:‘tiantian‘,age:5}

  ];

  $scope.func = function(e){return e.age>4;}{{ childrenArray | filter : ‘a‘ }} //匹配属性值中含有a的

  {{ childrenArray | filter : 4 }}  //匹配属性值中含有4的

  {{ childrenArray | filter : {name : ‘i‘} }} //参数是对象,匹配name属性中含有i的

  {{childrenArray | filter : func }}  //参数是函数,指定返回age>4的。

4.json(格式化json对象)

json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:

    {{ jsonTest | json}}。

5.limitTo(限制数组长度或字符串长度)

limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。个人觉得这个filter有点鸡肋,首先只能从数组或字符串的开头/尾部进行截取,其次,js原生的函数就可以代替它了,看看怎么用吧:

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项。

6.lowercase(小写)

把数据转化为全部小写。没有参数,只能把整个字符串变为小写,不能指定字母。

7.uppercase(大写)

同上。

8.number(格式化数字)

number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数:

{{ num | number : 2 }}。

9.orderBy(排序)

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

    <div>{{ childrenArray | orderBy : ‘age‘ }}</div>      //按age属性值进行排序,若是-age,则倒序

    <div>{{ childrenArray | orderBy : orderFunc }}</div>   //按照函数的返回值进行排序

    <div>{{ childrenArray | orderBy : [‘age‘,‘name‘] }}</div>  //如果age相同,按照name进行排序

    正如你所看到的,ng内置的过滤器也并不是万能的,事实上好多都比较鸡肋。更个性化的需求就需要我们来定义自己的过滤器了,下面来看看如何自定义过滤器。

  

  

时间: 2024-08-03 08:23:24

对于AngularJS的介绍的相关文章

angularjs简单介绍和特点

首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直接去写dom操作代码, 只要你监听

vuejs,angularjs,reactjs介绍

1.https://www.zhihu.com/question/263782718/answer/274623434 (Vue 除了SPA(单页面应用)还适用于什么类型网站?) 而一个项目采用什么前端框架,不是根据数据量来定的,而是根据这个项目的结构和学习成本来定的,假如项目是一个很典型的SPA结构,那我会想到用Vue.React.Angular这三者之一进行开发,如果你团队里的人对TypeScript很熟悉,同时学过Java的,那Angular则是首选:而如果你的团队里用惯React的人占多

AngularJs学习笔记1——总体介绍

这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足. 2.版本 angualrjs1.x:目前比较稳定版

angularjs学习总结 详细教程(转载)

1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小

Angularjs,WebAPI 搭建一个简易权限管理系统

Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 WebAPI项目主体结构 Angularjs前端主体结构 2. 前言 Angularjs开发CRUD类型的Web系统生产力惊人,与jQuery,YUI,kissy,Extjs等前端框架区别非常大,初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区,最典型的特征是在的开发过程中,使用

001.为什么选择用AngularJs开发?

网上关于AngularJs(https://angularjs.org/)的介绍与好处已经相当多了,大家可以自己去搜索看看,很多很多. 1.疯狂的原生的App开发 在这里我主要谈一下我自己为什么要使用AngularJs.2011年我开始接触IOS编程,发现苹果的App体验真的非常棒,自己也跟着教程做了几个应用得到了身边的朋友的一致好评论,随后接触了一些企业老板,由于我只会IOS开发,所以答应他们先从苹果端先开始,若运行不错,再开发Android版本,项目没有花太久就完成了,Boss们也很满意,但

[后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序.在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点.所有也就有了这篇文章. 二.AngularJs介绍 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并可扩展的服务,包括数据绑定.DOM操作.MVC和依赖注

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面

Node.js开发入门—使用AngularJS

做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用,还得搭配一个Web前端框架. AngularJS是一个JavaScript前端框架,对于Node.js来说是一个完美的客户端库.AngularJS强制使用MVC(模型-视图-控制器,Model-View-Controller)框架,而它又使用JavaScript对象作为它的模型,和Node.js特别般配,用AngularJS的某些服务(比如