![]() shirleywong |
![]() ?/span> 译的不错哦! |
AngularJS诞生以来Q吸引了大量的目光,也迅速成ZWeb开发领域的新宠。本文整理了2013q度一些非常有价值的AngularJS相关教程和资?/strong>Q如果你想了解AngularJS或正在用AngularJSQ那么这些资源肯定会Z的学习和q阶q程带来帮助?/p> 一、了解AngularJS 二、中文资?/strong> 1. 中文pd资源 2. 其他单篇文章 3. 中文书籍 三、英文资?/strong> 1. AngularJS入门教程 2. AngularJS指o学习 3. AngularJS应用开发实?/strong> 4. AngularJS游戏开发实?/strong> 5. AngularJS工作程和测?/strong> 6. AngularJS书籍
]]>
举个栗子Q要做到下面的效果,以前可能需要写一q串?JavaScript 代码l定 N 多事件。而?AngularJS 框架Q一?JavaScript 都不用写p实现了,奇吧?查看演示?/p>
q得益于 AngularJS 中的双向数据l定Ҏ?Two Way Data-Binding)Q将 Model ?View 自动兌了v来,在更复杂的业务场景下Q还有代码分ȝ好处Q将 DOM 操作和应用逻辑解耦,非常实用?/p>
不过没有银弹Q和其他框架一PAngularJS 也有它的局限。CRUD cd的操作是它所擅长的,x看以前写q的理后台Q几乎大部分都是从数据库中读取数据,然后呈现在页面上Q进行各U增删改查。AngularJS U定了一套规范(U定优于配置Q,于是你可以很便捷地操作数据。而在其他斚wQ例如开发复杂的 Web 游戏QAngularJS 则是无用武之C?/p>
上面的例子已l说明了Q我们可以像 PHP Smarty 模板一样在 HTML 中写表达式,?{{ ?}} 包v来。在 AngularJS 里,View ?Model 是在 Controller 里面l定的,所以无Z?View 的表单中修改了内容,q是?Controller 里通过代码修改?Model |两边都会x发生变化Q同步更新。因?AngularJS 会监?QwatchQ?Model 对象的变化,随时反映?View 中?/p>
Filter cM Unix 里面?| 道概念QAngularJS 把它搬到了前端。还是D个例子,你们感受一?#8212;—
输出l果Q?/p>
׃q去?JavaScript 的习惯ӞZ很容易掉q一?AngularJS 的陷阱里。下面的内容假设你已l了解前?MVC 概念Qƈ?AngularJS 有了一定经验,初学者读h可能比较艰深晦ӆ?/p>
避免使用 jQuery 来操?DOMQ包括增加元素节点,U除元素节点Q获取元素内容,隐藏或显C元素。你应该使用 directives 来实现这些动作,有必要的话你q要~写自己?directives?/p>
如果你感到很难改变习惯,那么考虑从你的网中U除 jQuery 吧。真的,AngularJS 中的 $http
服务非常强大Q基本可以替?jQuery ?ajax 函数Q而且 AngularJS 内嵌?jQLite —— 它内部实现的一?jQuery 子集Q包含了常用?jQuery DOM 操作ҎQ事件绑定等{。但qƈ不是说用了AngularJS ׃能用 jQuery 了。如果你的网|载入 jQuery 那么 AngularJS 会优先采用你?jQueryQ否则它?fall back ?jQLite?/p>
需要自q?directives 的情况通常是当你用了W三方的 jQuery 插g。因为插件在 AngularJS 之外对表单D行更改,q不能即时反应到 Model 中。例如我们用得比较多?jQueryUI datepicker 插gQ当你选中一个日期后Q插件会日期字W串填到 input 输入框中。View 改变了,却ƈ没有更新 ModelQ因?code style="margin: 0px; padding: 0px;">$('.datepicker').datepicker(); q段代码不属?AngularJS 的管理范围。我们需要编写一个directive 来让 DOM 的改变即时更新到 Model 里?/p>
然后?HTML 中引入这?direcitve
说白?directive 是?HTML 里写自定义的标签属性,辑ֈ插g的作用。这U声明式的语法扩展了 HTML?/p>
需要说明的是,有一?nbsp;AngularUI 目提供了大量的 directive l我们用,包括 Bootstrap 框架中的插g以及Z jQuery 的其他很热门?UI lg。我之前说过 AngularJS 的社区很z跃嘛,生态系l健全?/p>
q是个大坑。如果你L?ngOption 生成?nbsp;<select>
中的 <option>
的选项|每个 <option value="xxx">
?value 部分Q,那绝Ҏ枉费心机。因里的值永q都会是 AngularJS 内部元素的烦引,q不是你所指定的表单选项倹{?/p>
q是要{变观念,AngularJS 已经不再用表单进行数据交互了Q而是?Model。?$http 来提?ModelQ在 php 中则使用 file_get_contents('php://input')
来获取前端提交的数据?/p>
在页面初始化的时候,用户可能会看?{{ }}Q然后闪烁一下才出现真正的内宏V?br style="margin: 0px; padding: 0px;" />解决办法Q?/p>
Controller 不应该直接引?DOMQ而应该控?view 的行为。例?#8220;如果用户操作?XQ应该发生什么事?#8221;Q?#8220;我从哪里可以获得 XQ?#8221;
Service 在大部分情况下也不应该直接引?DOMQ它应该是一个单例(singletonsQ,独立于界面,?view 的逻辑无关。它的角色只?#8220;?X 操作”?/p>
DOM 操作应该攑֜ directives 里面?/p>
你所写的功能很可?AngularJS 已经实现了,有一些代码是可以抽象出来复用的,使用?Angular 的方式。M是很多 jQuery 的繁琐代码可以被替代?/p>
1. ng-repeat
ng-repeat 很有用。当 Ajax 从服务器获得数据后,我们l常使用 jQuery Q比如上面讲q的例子Q?向某?HTML 容器节点中添加更多的元素Q这?AngularJS 里是不好的做法。有?ng-repeat 一切就变得非常单了。在你的 $scope 中定义一个数l?QmodelQ?来保存从服务器拉取的数据Q然后?ng-repeat 它?DOM l定卛_。下面的例子初始化定义了 friends q个 model
昄l果
2. ng-show
ng-show 也很有用。?jQuery 来根据条件控制界面元素的昄隐藏Q这很常见。但?Angular 有更好的方式来做到这一炏Vng-show Q以?ng-hideQ?可以Ҏ布尔表达式来军_隐藏和显C。在 $scope 中定义一个变量:
cM的内|?directives q有 ng-disabledQ?ng-switch {等Q用于条件控Ӟ语法z,都很强大?/p>
3. ng-class
ng-class 用于条g性地l元素添?classQ以前我们也l常?jQuery 来实现。Angular 中的 ng-class 当然更好用了Q例子:
在这?ng-class 接受一?object 对象Qkey ?CSS class 名,gؓ $scope 变量控制的条件表辑ּQ其他类似的内置 directives q有 ng-class-even ?ng-class-oddQ很实用?/p>
AngularJS 的双向数据绑定是最令h兴奋的特性了Q然而它也不是全能的法Q在某些情况下你需要做一些小的修正?/p>
当你使用 ng-modelQ?ng-repeat {等来绑定一个元素的值时Q?AngularJS 为那个值创Z一?$watchQ只要这个值在 AngularJS 的范围内有Q何改变,所有的地方都会同步更新。而你在写自定义的 directive Ӟ你需要定义你自己?$watch 来实现这U自动同步?/p>
有时候你在代码中改变?model 的|view 却没有更斎ͼq在自定义事件绑定中l常遇到。这时你需要手动调?scope.$apply() 来触发界面更新。上?datepicker 的例子已l说明了q一炏V第三方插g可能会有 call backQ我们也可以把回调函数写成匿名函C为参C?apply()中?/p>
ng-repeat 很有用,不过它和 DOM l定了,很难在同一个元素上使用其他 directives Q比?ng-showQ?ng-controller {等Q?/p>
如果你想Ҏ个@环用某?directiveQ你可以?repeat 外再包一层父元素?directive 写在那儿Q如果你惛_循环内部的每一个元素用某?directiveQ那么把它放?ng-repeat 的一个子节点上即可?/p>
Scope ?templates 模板中应该是 read-only 的,而在 controller 里应该是 write-only 的。Scope 的目的是引用 modelQ而不是成?model。model 是我们定义?JavaScript 对象?/p>
Scopes ?AngularJS 中Ş成一定的层关系Q树状结构必然有一个根节点。通常我们用不到它Q因为几乎每?view 都有一?controller 以及相对应的自己?scope?/p>
但偶有一些数据我们希望全局应用在整?app 中,q时我们可以数据注?$rootScope。因为其?scope 都会l承 root scopeQ所以那些注入的数据对于 ng-show q类 directive 都是可用的,像是在本地 $scope 中的变量一栗?/p>
当然Q全局变量是邪恶的Q你必须很小心地使用 $rootScope。特别是不要用于代码Q而仅仅用于注入数据。如果你非常希望?$rootScope 写一个函敎ͼ那最好把它写?service 里,q样只有用到的时候它才会被注入,试h也方便些?/p>
相反Q如果一个函数的功能仅仅是存储和q回一些数据,׃要把它创建成一?service?/p>
怎样l织代码文g和目录?q恐怕是初学者一开始就会遇到的问题。AngularJS 应用开发的官方入门目angular-seedQ其文gl构是这LQ?/p>
q种l构对于一个简单的单页 app 来说是可行的Q只是一旦代码中存在多个 Controller 或?ServiceQ就很难扑ֈ惌L的对象了。我们可以对文g按照业务逻辑q行拆分Q就像下面这P
q种l构把不同的业务功能拆分为独立的文gQ条理清晎ͼ但是仍有一定的局限性。最大的问题是一个业务功能的代码分布在controllers, models, servers 三个不同目录下,要从中挑出正的文gQ徏立v代码兌Q还是有些麻烦。按照功能进行模块化划分目录l构Q应该要更ؓ合理一些:
q样也是适合 RequireJS {模块加载器的自然直观的代码l织方式?/p>
参考链接: