AngularJS 表达式的实例详解-html教程-PHP中文网

AngularJS 表达式的实例详解

零下一度

发布： 2017-06-28 09:12:11

原创

1852人浏览过

最近想做一款跨平台（pc\app\pad）的东西玩玩,研究了许多技术：

android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程序

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

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

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

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

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

我要接近 angular ~~

PHP5 MySQL 编程入门

既有较为详细的PHP与MySQL基础知识介绍，也有大量针对不同应用的技术说明，并伴随了大量小而精的示例来加深读者的理解，便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心，从环境搭建到系统开发，从局部技术点到项目全程把握，立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识，可以让读者享受到提升开发能力的极速体验。

412

查看详情

先从收集信息开始：

她从哪来？

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脚本：

通过设置<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）生成同名变量。