今天我们来818《angularjs in action》的第三章controller和view。
仔细看看图,再想想还有一个众所周知的概念——MVC,对比下来,你是否体会到了什么?
我们说通过胶水scope建立起view和controller之间的联系和交互。那么scope到底是什么,它又是如何实现view和controller之间相互通信的?深究后发现,scope就是一个带有事件机制的POJO(Plain Old Javascript Object)。这些事件促成了angularjs中的digest cycle,从而同步view端和controller端,具体如下图:
Angularjs有着一套自己的事件机制,添加事件,然后在应用的任何地方响应。发射事件的方式有两种:$broadcast和$emit,他们除了发射事件的方向不一样意外,别无二致。负责监听和响应使用的是$on。
要使用事件机制就要有scope对象,比如你要在一个service中broadcast一个事件,就需要注入$rootScope。当然了,一般来说我们不直接注入$rootScope,而是将$rootScope注入放在一个高level的地方。$broadcast是向下发送事件,所以需要确保所有的scope对象都能够响应事件,因为所有的scope对象都在$rootScope对象下面。一般来说,开发者都使用promises来处理services中的异步事件。
接下来我们要搞懂两个问题:绑定属性和执行表达式。
你如何展示一个对象数组,而且实现并没有定义他们的布局等等,如果有个东西能够定义一个template然后只要repeat每个对象就可以展示是不是炫爆了,没错,angularjs中的ngRepeat为您带来了福音。
我们定义一个对象数组,其中有各个不同的status,通过ngRepeat来遍历每个status然后显示到页面上。
这里的status in storyboard.statuses就是遍历出controller中的statues数组,然后通过{{status.name}}实现双向绑定,取到controller中各个status对应的name(To Do, In Progress, Code Review, QA Review, Verified)
过滤器可以过滤出你想要的数据格式和内容。比如在上例中可以使用|filter:{status:status.name},,这个表达式意思是说只返回那些匹配status.name的stories。
最终得到如下结果:
到目前为止,已经知道如何通过template和ngRepeat来展示stories集合了,那么如何展示、更新和删除单个story detail页面呢?
这里做了一些准备工作,一个currentStory和editStory。(这里可以通过http://www.tuicool.com/articles/En6Jve了解下copy和extend的区别,深拷贝和浅拷贝)
页面中定义如下:
注意:通过这个例子,可以看出angularjs是如何传值,明白了angularjs这种里面的函数的参数的值从何而来。从本例来看,在页面中通过ng-repeat得到当前current的这个story,并在ng-click事件中添加storyboard.setCurrentStory(story)函数,而且将story作为参数传入,并在StoryboardController.js的setCurrentStory有其具体实现
更新story就是更新storyboard.detailForm中的元素,并将更新的只直接reflected到storyboard.editedStory中去(如果觉得有点迷糊,记得结合项目源码看)。这里主要有storyboard.updateCancel(取消更新)和storyboard.updateSotry(确认更新)。 其中storyboard.updateCancel通过调用resetForm是的form恢复初始状态,updateStory通过遍历每个属性并写入到storyboard.currentStory对象中,一旦这个操作完成,还需要执行resetForm使得表格恢复初始状态。
创建一个story和update的过程很像,只是我们不需要再选择current story这个步骤了,直接创建后push保存就ok了。当storyboard.currentStory为null时,我们就隐藏update按钮同时显示create的按钮。
删除一个story只需要得到从前台页面通过ng-click传过来的id就可以实现删除了
至此,我们啃完了第三章,大概内容有:
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。