一路学Angular

目前想做一款跨平台(pc\app\pad)的事物玩玩,研商了不计其数技能:

android、ios、H⑤ 、Bootrap、angular、angular贰 、ApiCloud、微信小程序

除android、ios 自身的羁绊(系统)其它 的都
可以达成跨平台,尤其ApiCloud、微信小程序做开发sdk级消除方案万分火热,但是从技术主权上讲太依仗人家的事物,

H5 、bootstrap 在响应式格外美好,前后端框架基本得以承包 。

本来还有为数不少 前端框架 如vue.js 等等。

不精通why,近来对angular暴发兴趣,兴趣是最不要脸的行事号召力,比如您对有些美丽孙女爆发了深切的趣味,然后。。。。(~~~开个笑话)

下一场就要去想办法接近 “她” ~~

自我要接近 angular ~~

 

先从收集音讯开头 :

他从哪来?

AngularJS[1]  诞生于二〇〇九年,由Misko Hevery
等人创办,后为谷歌所收购。是一款能够的前端JS框架,已经被用于谷歌(Google)的多款产品中间。AngularJS有着众多特征,最为主旨的是:MVC、模块化、自动化双向数据绑定、语义化标签、正视注入等等。

她的迷人之处?

AngularJS是为了克制HTML在营造利用上的供不应求而设计的。HTML是一门很好的伪静态文本展现设计的注明式语言,但要打造WEB应用的话它就展现乏力了。

见惯司空,我们是经过以下技术来消除静态网页技术在构建动态应用上的阙如:

类库 –
类库是部分函数的聚合,它能支援您写WEB应用。起主导功效的是您的代码,由你来决定哪一天使用类库。类库有:jQuery等

框架 –
框架是一种独特的、已经达成了的WEB应用,你只须求对它填充具体的事体逻辑。那里框架是起主导功能的,由它来依据实际的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

——好啊,还不够迷人

AngularJS通过为开发者显示两个更高层次的虚幻来简化使用的支出。就好像任何的用空想来欺骗别人技术一样,那也会损失一部分回船转舵。换句话说,并不是持有的选用都严丝合缝用AngularJS来做。AngularJS首要考虑的是打造CRUD应用。幸运的是,至少9/10的WEB应用都以CRUD应用。可是要询问怎么适合用AngularJS营造,就得询问如何不符合用AngularJS营造。

如游戏,图形界面编辑器,那种DOM操作很频仍也很复杂的利用,和CRUD应用就有很大的例外,它们不适合用AngularJS来打造。像那种场馆用部分更轻量、不难的技巧如jQuery可能会更好。

——心动了么?

———-不得不说,我们富有的网络行为只是是三个个的数据点进行CRUD,如购物车加减商品(+
-)、查 机票、车票 、清除 不挂钩的微信好友 、下个订单————

 

愈来愈钻探:

 

在<html>标签里,大家用3个ng-app标识符标明那是一个AngularJS应用。

以此ng-app标识符会使AngularJS自动开始化(auto initialize)你的选择。

大家用<script>标签来加载AngularJS脚本:

<script src=”angular-1.1.0.min.js”></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 

 

相关文章