ylbtech-AngularJS.js: 杂项
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
 
1. 研发背景返回顶部
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
 
2. 解决方案返回顶部
AngularJS试图成为WEB应用中的一种客户端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，还是一个完整的客户端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是在你构建应用的起点，并且你仍能灵活变动。AngularJS的一些出众之处如下：
构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。
具有目录布局和测试脚本的种子应用作为起点。
 
3. 主要特点返回顶部
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。
如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
 
4. 实例返回顶部
下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证，然后用来计算总值，这个总值会被格式化成本地的样式。下面有一些开发者常见的概念，你需要先了解一下：
1.将数据模型(data-model)关联到视图(UI)上；
2.写、读、验证用户的输入；
3.根据模型计算新的值；
4.将输出格式本地化，
index.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html ng-app>
<head>
<script src="angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
script.js
1
2
3
4
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
试一下上面这个例子。然后我们一起来看下这个例子的工作原理。
在<html>标签里，我们用一个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应用的开发门槛降到不需要类库或者框架的程度。
 
5. 理念返回顶部
Angular信奉的是，当组建视图(UI)同时又要写软件逻辑时，声明式的代码会比命令式的代码好得多，尽管命令式的代码非常适合用来表述业务逻辑。
将DOM操作和应用逻辑解耦是一种非常好的思路，它能大大改善代码的可调性；
将测试和开发同等看待是一种非常非常好的思路，测试的难度在很大程度上取决于代码的结构；
将客户端和服务器端解耦是一种特别好的做法，它能使两边并行开发，并且使两边代码都能实现重用；
如果框架能够在整个开发流程里都引导着开发者：从设计UI，到编写业务逻辑，再到测试，那对开发者将是极大的帮助；
“化繁为简，化简为零”总是好的。
AngularJS能将你从以下的噩梦中解脱出来：
使用回调：回调的使用会打乱你的代码的可读性，让你的代码变得支离破碎，很难看清本来的业务逻辑。移除一些常见的代码，例如回调，是件好事。大幅度地减少你因为JavaScript这门语言的设计而不得不写的代码，能让你把自己应用的逻辑看得更清楚。
手动编写操作DOM元素的代码：操作DOM是AJAX应用很基础的一部分，但它也总是很“笨重”并且容易出错。用声明的方式描述的UI界面可随着应用状态的改变而变化，能让你从编写低级的DOM操作代码中解脱出来。绝大部分用AngularJS写的应用里，开发者都不用再自己去写操作DOM的代码，不过如果你想的话还是可以去写。
对UI界面读写数据：AJAX应用的很大一部是CRUD操作。一个经典的流程是把服务端的数据组建成内部对象，再把对象编成HTML表单，用户修改表单后再验证表单，如果有错再显示错误，然后将数据重新组建成内部对象，再返回给服务器。这个流程里有太多太多要重复写的代码，使得代码看起来总是在描述应用的全部执行流程，而不是具体的业务逻辑和业务细节。
开始前得写大量的基础性的代码：通常你需要写很多的基础性的代码才能实现一个“Hello World”的应用。用AngularJS的话，它会提供一些服务让你很容易地正式开始写你的应用，而这些服务都是以一种Guice-like dependency-injection式的依赖注入自动加入到你的应用中去的，这让你能很快的进入你应用的具体开发。特别的是，你还能全盘掌握自动化测试的初始化过程。
 
6. 表达式返回顶部
AngularJS 表达式写在双大括号内：{{ expression }}。 
AngularJS 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
 
7.返回顶部
 
8.返回顶部
 
9.返回顶部
 
10.返回顶部
0、
1、
2、
3、
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

AngularJS.js: 杂项的更多相关文章

  1. angular js 自定义js错误处理(Angularjs js error handler)

    使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...

  2. js杂项

    css是 下划线命名法:table_sub ;javascript ,net ,sql 全部是camel命名法 找临界点 1.elem.checked 有两个值,true,false . 页面中< ...

  3. AngularJS.js: temple

    ylbtech-AngularJS.js: temple 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部 ...

  4. js杂项积累

    主要内容: 一 浏览器重定向Http请求跨域 二 html select标签 可以设置属性multipe,变为多选 三 document.wirte只应在script标签的顶层代码中使用.不能放在函数 ...

  5. [js]js杂项陆续补充中...

    hasOwnProperty判断对象是否有这个属性 p = { 'name': 'maotai', 'age': 22 }; console.log(p.hasOwnProperty('names') ...

  6. js 杂项（一）函数篇

    你还应该知道箭头函数( => )可以用来保留上下文.这个方法也可以:

  7. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  8. AngularJs之$scope对象（作用域）

      一.作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于 ...

  9. AngularJS+Node的RESTful之基本实现

    欢迎大家指导与讨论 : ) 一.前言 本文主要讲述RESTful在node端与AngularJS两端配合的基本实现方法,为了尽量做到大家易看易懂,因此文章也没有深入探讨(其实是小鹏我只学到目前这些 - ...

随机推荐

  1. windows 2008 server R2 服务器docker安装

    1.安装包选择 windows win10 较新版本,使用 Get Docker for Windows (Stable) 或者 Get Docker for Windows (Edge) 其余使用  ...

  2. Netlink 基础知识

    Netlink 基础知识 Netlink 相对于系统调用,ioctl 以及 /proc 文件系统而言具有以下优点: 1. 用户仅需要在 include/linux/netlink.h 中增加一个新类型 ...

  3. js的 style.width 取不到元素的宽度值

    以前一直用jquery的.width()方法来获取一个元素的当前的宽度.不管该元素是否设置了宽度,CSS样式是内联.外联or内嵌,都可用此方式获得元素当前的宽度. 今天想用原生JS想获取一个元素宽度时 ...

  4. ubuntu安装搜狗输入法的相关问题

    最近换了一次电脑,要重新装系统,就选择了ubuntu14.04 LTS版本的,这个版本官方支持到2019年了,所以相对来说比较稳定,也不用担心软件源的问题.不像14.10那样,现在官方已经没有软件源的 ...

  5. yii2.0 高级版 restful api使用

    1.复制任意个目录(backend)为api 2.打开api下的main.php 修改 id=>app-api,'controllerNamespace' => 'api\controll ...

  6. continue的作用

    特别有用,用于循环中-跳过不满足某个条件的某轮循环continue后面的语句

  7. 手机通过笔记本开的WIFI访问TOMCAT服务器站点示例

    我一直想用手机连上笔记本上的服务器TOMCAT,尝试了好久没连上,实验室一个妹子会这个技术,我也想学,自己摸索着学了几次,没成功,今晚想个办法试了一下,可以连接了,以后可以做手机网站开发了,这也是移动 ...

  8. EasyPlayer RTSP Android安卓播放器修复播放画面卡在第一帧bug

    本文转自EasyDarwin团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/75717097 最近发现某些手机在运行EasyPlaye ...

  9. 关于Fildder更改ip简单配置

    之前由于我们公司之前的域名备案 所以临时购买了一个域名主机,可能你如果不配置的话有时候看不到你自己app一些抓包信息具体分为以下几步 配置Filter过滤器记得勾选 第一次进入的时候 2.然后我们再H ...

  10. PHP中cookies跨目录无法调用

    <?php  setcookie("messagetime",time(),time()+60);  ?> 写法无法跨目录调用呢.在搜索引擎中搜索,并没有找到答案(可能 ...