AngularJS in Action读书笔记2——view和controller的那些事儿

时间:2023-03-08 15:43:30
AngularJS in Action读书笔记2——view和controller的那些事儿

今天我们来818《angularjs in action》的第三章controller和view。

1.Big Picture概览图

AngularJS in Action读书笔记2——view和controller的那些事儿
AngularJS in Action读书笔记2——view和controller的那些事儿

  • View是angularjs编译html后呈现出来的,需要编译的是controller中的定义的属性和方法以及directive中定义的指令。
  • View和controller是独立开来的,他们之间的纽带就是图中间的胶水——scope。Controller负责向scope中提供属性和方法,便于和view层面的html进行交互。
  • 方便起见,我们通常将controller和scope统一视为ViewModel。这样就引出了我们见到的一个概念MVVM框架(Model-View-ViewModel),这也是angularjs遵循的框架理念。具体见下图

AngularJS in Action读书笔记2——view和controller的那些事儿
  仔细看看图,再想想还有一个众所周知的概念——MVC,对比下来,你是否体会到了什么?

2.What Is An Angularjs View

  •   如果你打开angularjs的官网,你将会看到这样一句话“HTML enchanced for web apps”。这在一定程度上肯定了angularjs也揭露了angularjs一个重要的特性,传统html标签以外的指令。
  •   在scope中存入一个变量值$scope.name,便可以在html中通过<p>{{name}}</p>的方式展示出来。如果你想将一个数组放入scope中$scope.values=[1,2,3,4],那也没问题,只需要在html中写上<p ng-repeat=”value in values”>{{value}}</p>,就可以遍历并展示整个数组。
  •   Angularjs提供了很多内置的指令,但是面对错综复杂的真实世界,angularjs显得有些力不从心。所以angularjs团队提供用户可以编写自定义的指令。(这是个long story,这里先不说,让我们继续controller和view之间的那些事儿~~~)
  •   言归正传,View到底是什么?简而言之,就是经过angularjs编译DOM得到的页面呈现。那我们就好好理解下“编译”二字的具体含义。
  •   编译分为两部分:compilation阶段和linking阶段。
  1.     当html加载完成后,angularjs就开始解析DOM节后并编译其中包含的directives,这就是compilation阶段的工作;
  2.     一旦html中的所有元素都编译完了,angularjs就开始进入linking阶段,负责链接到每个angularjs编译条目对应的scope实例。
  3.     当angularjs的template被链接到相应的controller之后,就通过scope完成了view和controller之间的联系,就犹如上图中的胶水一般。具体可以参见图

AngularJS in Action读书笔记2——view和controller的那些事儿

3.What Is An Angularjs Controller

  我们说通过胶水scope建立起view和controller之间的联系和交互。那么scope到底是什么,它又是如何实现view和controller之间相互通信的?深究后发现,scope就是一个带有事件机制的POJO(Plain Old Javascript Object)。这些事件促成了angularjs中的digest cycle,从而同步view端和controller端,具体如下图:
AngularJS in Action读书笔记2——view和controller的那些事儿

  Angularjs有着一套自己的事件机制,添加事件,然后在应用的任何地方响应。发射事件的方式有两种:$broadcast和$emit,他们除了发射事件的方向不一样意外,别无二致。负责监听和响应使用的是$on。
AngularJS in Action读书笔记2——view和controller的那些事儿

  要使用事件机制就要有scope对象,比如你要在一个service中broadcast一个事件,就需要注入$rootScope。当然了,一般来说我们不直接注入$rootScope,而是将$rootScope注入放在一个高level的地方。$broadcast是向下发送事件,所以需要确保所有的scope对象都能够响应事件,因为所有的scope对象都在$rootScope对象下面。一般来说,开发者都使用promises来处理services中的异步事件。

4.Properites and Expressions

  接下来我们要搞懂两个问题:绑定属性和执行表达式。

   4.1 ngRepeat

  你如何展示一个对象数组,而且实现并没有定义他们的布局等等,如果有个东西能够定义一个template然后只要repeat每个对象就可以展示是不是炫爆了,没错,angularjs中的ngRepeat为您带来了福音。
AngularJS in Action读书笔记2——view和controller的那些事儿

  我们定义一个对象数组,其中有各个不同的status,通过ngRepeat来遍历每个status然后显示到页面上。
AngularJS in Action读书笔记2——view和controller的那些事儿

  这里的status in storyboard.statuses就是遍历出controller中的statues数组,然后通过{{status.name}}实现双向绑定,取到controller中各个status对应的name(To Do, In Progress, Code Review, QA Review, Verified)

AngularJS in Action读书笔记2——view和controller的那些事儿

  4.2 Filters

  过滤器可以过滤出你想要的数据格式和内容。比如在上例中可以使用|filter:{status:status.name},,这个表达式意思是说只返回那些匹配status.name的stories。
AngularJS in Action读书笔记2——view和controller的那些事儿

  最终得到如下结果:
AngularJS in Action读书笔记2——view和controller的那些事儿

  4.3 Expression

  到目前为止,已经知道如何通过template和ngRepeat来展示stories集合了,那么如何展示、更新和删除单个story detail页面呢?

  •   display a story

AngularJS in Action读书笔记2——view和controller的那些事儿
  这里做了一些准备工作,一个currentStory和editStory。(这里可以通过http://www.tuicool.com/articles/En6Jve了解下copy和extend的区别,深拷贝和浅拷贝)

  页面中定义如下:
AngularJS in Action读书笔记2——view和controller的那些事儿

  注意:通过这个例子,可以看出angularjs是如何传值,明白了angularjs这种里面的函数的参数的值从何而来。从本例来看,在页面中通过ng-repeat得到当前current的这个story,并在ng-click事件中添加storyboard.setCurrentStory(story)函数,而且将story作为参数传入,并在StoryboardController.js的setCurrentStory有其具体实现

  •   Update a story

  更新story就是更新storyboard.detailForm中的元素,并将更新的只直接reflected到storyboard.editedStory中去(如果觉得有点迷糊,记得结合项目源码看)。这里主要有storyboard.updateCancel(取消更新)和storyboard.updateSotry(确认更新)。
  其中storyboard.updateCancel通过调用resetForm是的form恢复初始状态,updateStory通过遍历每个属性并写入到storyboard.currentStory对象中,一旦这个操作完成,还需要执行resetForm使得表格恢复初始状态。
AngularJS in Action读书笔记2——view和controller的那些事儿

  •   Create a story

  创建一个story和update的过程很像,只是我们不需要再选择current story这个步骤了,直接创建后push保存就ok了。当storyboard.currentStory为null时,我们就隐藏update按钮同时显示create的按钮。

AngularJS in Action读书笔记2——view和controller的那些事儿

  •   Delete a story

  删除一个story只需要得到从前台页面通过ng-click传过来的id就可以实现删除了
AngularJS in Action读书笔记2——view和controller的那些事儿

至此,我们啃完了第三章,大概内容有:

  • 了解angularjs中的view层;
  • 了解angularjs中的controller用于定义属性和方法存放在scope上,并且可以和view交互;
  • 了解scope是一个POJO,是view和controller之间的胶水;
  • 当属性在scope中声明,意味着可以直接绑定到view上;
  • ngRepeat的介绍和使用;
  • filter的介绍和使用;
  • display、update、create、delete a story.

  如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

  AngularJS in Action读书笔记2——view和controller的那些事儿

友情赞助

如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。

    1. 支付宝                          2. 微信

AngularJS in Action读书笔记2——view和controller的那些事儿                      AngularJS in Action读书笔记2——view和controller的那些事儿