Angularjs最佳实践一----Angularjs基础

用这个客户端发布博客貌似没有摘要,困惑中。

浏览器是如何得到网页的呢?

让我们把因特网想象成一个邮局,当你要发信给你的朋友,首先你要在一张纸上写下文字,然后信封上写你朋友的地址,把信装入信封。再交给邮局,邮箱分检员会根据邮政编码和地址来寻找你朋友住的位置。如果他住在一个很大的社区,邮局服务人员会将信给前台由社区人员按照公寓分类。

因特网以类似的方式工作,只不过不再是一个个由街道连接的房子或公寓,而是通过路由和线缆连接的一群计算机,每台计算都有一个唯一的地址来告诉网络如何到它那儿。

就如同很多栋公寓楼共享一个地址,计算机也能存在于同一个网络或路由(连接同一wifi),这种情况下,你的计算机和其他的计算机对外ip地址一样,当然通过内部ip(如同公寓号),路由就如同社区人员。

IP代表internet protocol,一个ip地址是一个数字标记符,被每一个参与到网络活动中的设备持有。如计算机、打印机、甚至手机都有ip地址。目前有两种ip地址类型:ipv4和ipv6,今天我们用的最多是ipv4,如192.168.1.10,ipv6看起来FE80:0000:0000:0000:AAAA:0000:00C2:0002。当我们打开浏览器输入http://www.baidu.com,你的浏览器回去询问DNS:baidu.com的地址在哪,如果DNS知道你要寻找的ip地址,会直接响应给你,否则这个请求将被转发到其他DNS直到你要找的ip地址被找到。一旦你要找的ip地址被响应,DNS还会发一条消息给那个地址去请求你要求的网页,每个网页都有一个路径,如访问http://www.baidu.com 和http://www.baidu.com/duty/展示的内容不同。一旦远程服务器发回这个html,我们的浏览器就会呈现它。

无论是什么浏览器,核心工作就是:提取web页并显示给用户。你的浏览器根据html文本将其解析为结构布局和内容,显示给用户之前将内容样式化,这些都是浏览器背后要做的工作。

用Angular,我们不但构造结构,而且会建造用户和web应用之间的交互。官方对AngulaJS的描述为:AngularJS作为一种客户端技术,完全基于JavaScript编写,它配合web技术HTML/CSS/JavaScript让我们的Web开发比以前更快更容易。它是一个框架,主要用于创建单页面应用,AngularJS团队将其称作动态web应用的结构框架,AngularJS处理了用户在现代web开发中常用的高级特性:

  • 应用逻辑、数据模型、视图分离
  • Ajax 服务
  • 依赖注入
  • 浏览器历史(书签的前进/后退按钮正常工作)
  • 可测试
  • 其他

和其他JavaScript框架相比,不必扩展自定义javascript对象和处理DOM,如Jquery,想要给DOM添加一个button,我们需要知道这个元素在哪并插入到合适的位置。

var btn = $("hi");

btn.on(‘click‘, function (evt) { console.log("clicked button!") });

$("#checkoutHolder").append(btn);

虽然这看起来不是很复杂,可是这要求开发人员具备DOM的知识,并强迫我们将处理外部DOM复杂的逻辑放入JavaScript代码中。

AngularJs却赋予了HTML本地MVC的能力,使得构建客户端应用变得迅速并乐在其中。开发人员可以分装部分内容作为应用,并不强迫你完全把整个页面都AngularJS化,这对于已有的程序如果采用了其他JavaScript框架尤其有益。另外,AngularJS压缩后只有9KB小,这一特性对构造原型功能相当有好处。

协议:基于MIT,源代码托管于GitHub,当然你也可以贡献自己的力量来帮助这个框架变得更好。具体详情请参照官方网站。

菊子曰:我最喜欢的微博客户端

时间: 2024-10-13 23:31:51

Angularjs最佳实践一----Angularjs基础的相关文章

AngularJS 最佳实践

AngularJS 最佳实践 转载:http://www.lovelucy.info/angularjs-best-practices.html

AngularJs最佳实践三----模块

在前面的代码里,我们将功能代码放在全局的命名空间里可不是个好主意,这可能会引起很难调试的冲突还会浪费宝贵的开发时间.你可能已经猜到了,有效的用于最终产品的代码会是封装我们的功能到一个单元这个概念被称为module(模块),模块是定义AngularJs应用的主要方式.app的模块里我们将包含所有的成许代码.一个应用keyi包含几个模块,每一个模块会包含特定功能的代码.使用模块带来的好处显而易见: 保持全局命名空间干净 测试更容易编写 程序之间容易共享代码 以任意顺序载入代码的不同部分 模块的声明格

AngularJs最佳实践二----数据绑定

在我们传统的web框架中,如Rails,Controller混合了来自model的数据并且糅合在模板里成为一个view呈现给用户.这种混合风格会导致single-way-view.视图只能反映在视图呈现的时候的model数据.当然也有写框架有望实现视图和模型的自动数据绑定. AngularJs 采用了一种不同方式,即不是将数据混入模板然后替换Dom元素.AngularJs创建live模板作为视图.视图的独立组件被动态内插值替换,这个特征可能是AngularJs最重要的一个使得我们不用写一行Jav

AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index

"有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!" 看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的.下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-co

《AngularJS深度剖析与最佳实践》简介

由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持shuang_lang_shuo[破狼]微信号,同时也欢迎大家的高质量文章的投稿. 在2015年一年时间中,我.雪狼大叔.彭洪伟一起共同编写了<AngularJS深度剖析与最佳实践>这本前端Angular.js框架的进阶书籍.在写作期间也得到很多人的支持,特别是在Angularjs中文社区群中的各位群

基于AngularJS的前端云组件最佳实践

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

AngularJS 指令实践

概述 如果你写过AngularJS的应用,那么你一定已经使用过指令,不管你有没有意识到.你肯定已经用过简单的指令,比如 ng-mode, ng-repeat, ng-show等.这些指令都赋予DOM元素特定的行为.例如,ng-repeat 重复特定的元素,ng-show 有条件地显示一个元素.如果你想让一个元素支持拖拽,你也需要创建一个指令来实现它. 指令基本思想:它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性. Link函数和Scope 指令生成出的模板其实没有太多意义,除

AngularJS巩固实践-40-$timeout使用技巧

在前端开发中,经常处理一些延时任务,比如,为了防止界面停止响应,将一些费时任务延后(js单线程执行,所以需要合理安排任务执行顺序),或是要等一些DOM元素出现后才能继续,这时,通常使用window.setTimeout来专门处理这类延时任务. 在ng应用中也可以使用setTimeout,但由于ng的脏检查机制,在延时任务中修改被绑定到界面中的变量时,window.setTimeout是不会触发脏检查来更新UI界面的,所以此时就需要使用$scope.$apply来手动触发脏检查. 但有时会遇到ng

基础入门_Python-模块和包.运维开发中watchdog事件监视的最佳实践?

简单介绍: 说明:  此模块是一个跨平台的PY库和SHELL工具,可以监视文件系统事件(增加/删除/修改) 快速安装: pip install --upgrade watchdog 日志记录: event_handler = LoggingEventHandler() -> event_handler 说明: 创建一个日志处理句柄,其实LoggingEventHandler是继承自FileSystemEventHandler类,只是重写了增删查改的回调函数,直接调用logging模块写到对应lo