首页 > 开发 > JavaScript > 正文

AngularJS 表达式的实例详解

2020-03-24 19:24:52
字体:
来源:转载
供稿:网友
最近想做一款跨平台(pc/app/pad)的东西玩玩,研究了许多技术:

android、ios、H5、Bootrap、angular、angular2、ApiCloud、html' target='_blank'>微信小程序

除android、ios 本身的枷锁(系统)其它 的都 可以实现跨平台,尤其ApiCloud、微信小程序做开发sdk级解决方案很是火热,但是从技术主权上讲太依赖人家的东西,

H5 、bootstrap 在响应式相当优秀,前后端框架基本可以承包 。

当然还有很多 前端框架 如vue.js 等等。

不知道why,目前对angular产生兴趣,兴趣是最不要脸的行为号召力,比如你对某个漂亮姑娘产生了浓厚的兴趣,然后。。。。(~~~开个玩笑)

然后就要去想办法接近 “她” ~~

我要接近 angular ~~

先从收集信息开始 :

她从哪来?

AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

她的迷人之处?

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。

通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。------好吧,还不够迷人AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。------心动了么?----------不得不说,我们所有的互联网行为无非是一个个的数据点进行CRUD,如购物车加减商品(+ -)、查 机票、车票 、清除 不联系的微信好友 、下个订单------------
进一步探索: 在 html 标签里,我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)你的应用。我们用 script 标签来加载AngularJS脚本: script src= angular-1.1.0.min.js?1.1.11 /script 通过设置 input 标签里的ng-model属性, AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证:Quantity: input type= integer min= 0 ng-model= qty required Cost: input type= number ng-model= cost required 这个输入框的widget看起来很普通,但如果认识到以下几点那它就不普通了:当页面加载完后,AngularJS会依照widget里的声明的模型名字(qty、cost)生成同名变量。可以把这些变量认为是MVC设计模式中的M(Model);注意上面widget里的input有着特殊的能力。如果你们没有输入数据或者输入的数据无效,这个input输入框会自动变红。输入框的这种新特性,能让开发者更容易实现CRUD应用里常见的字段验证功能。终于,我们可以来看一下神秘的双大括号{{}}了:Total:{{qty *cost |currency}}这个{{表达式}}标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器({{ expression | filter }})的组合。AngularJS提供了过滤器来对输入输出数据格式化。上面的这个例子里,{{}}里的表达式让AngularJS把从输入框中获得的数据相乘,然后把相乘结果格式化成本地货币样式,然后输出到页面上。值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成 静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。 Angular信奉的是,当组建视图(UI)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多,尽管命令式的代码非常适合用来表述业务逻辑。将DOM操作和应用逻辑解耦是一种非常好的思路,它能大大改善代码的可调性;将测试和开发同等看待是一种非常非常好的思路,测试的难度在很大程度上取决于代码的结构;将客户端服务器端解耦是一种特别好的做法,它能使两边并行开发,并且使两边代码都能实现重用;如果框架能够在整个开发流程里都引导着开发者:从设计UI,到编写业务逻辑,再到测试,那对开发者将是极大的帮助;“化繁为简,化简为零”总是好的。AngularJS能将你从以下的噩梦中解脱出来 AngularJS 表达式编辑AngularJS 表达式写在双大括号内:{{ expression }}。[2] AngularJS 表达式把数据绑定到 HTML,这与ng-bind指令有异曲同工之妙。AngularJS 将在表达式书写的位置 输出 数据。AngularJS 表达式很像JavaScript 表达式:它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + + lastName }} 初步认识了angular ,等待约下次~~~要一起么~~~ V-V

以上就是AngularJS 表达式的实例详解的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表