PartyBid 学习笔记之第一张卡片总结

此博客已弃，请转至此处。

本文仅为培训期间应试作文，不具任何教学价值，具体问题请参考对应文章。

AngularJS LOGO

前情提要

Party Bid 是一款基于 AngularJS 的安卓网页应用。所谓安卓网页应用，指的是应用完全使用网页开发模式构造（HTML + CSS + JavaScript），之后使用 Apache Cordova 工具将其生成为安卓本地应用项目。

对于应用内容的介绍，考虑到本文的面向读者，此处不再详细说明，主要内容在于 开发过程中所用到的技术 和 个人学习的一些心得体会 。

关于 AngularJS 的简要介绍，请参见 AngularJS —— 新兴的 Web 前端开发框架(待写)。
关于 Yeoman 工具的使用介绍，请参见 Yeoman 之搭建 AngularJS 开发环境(待写)。
关于 Cordova 工具的使用介绍，请参见 Cordova —— 让 Web 统治世界(待写)。

建立项目

为了方便的直接建立出 AngularJS 项目，我们需要使用到 Yeoman 工具。

安装 Yeoman 的步骤已在 [OSX 之 Web 开发环境配置]({% post_url 2014-07-17-OSX之Web开发环境配置 %})文章中给出。

核心步骤的命令行代码如下：

$ npm install -g yo

至此已经安装好了 Yeoman ，随后我们通过其来创建一个 AngularJS 项目：

详细说明及内容拓展请参见 Yeoman 之搭建 AngularJS 开发环境(待写)。

1.安装 Yoeman 的 AngularJS 模板生成器：

$ npm install -g generator-angular

含义顾名思义。Yo （Yeoman 的一个组件，下文中都会具体说明每个操作是 Yo, Grunt 或 Bower 的功能）可以通过安装相应的 generator 来实现功能拓展，除了 AngularJS 的之外，还有很多其他的 generator 可以使用。也就是说，通过拓展，Yo 理论上可以适用于任何类型的项目。

2.新建一个文件夹并进入，文件夹名称即为项目名 party_bid（为了避免各种地方都加引号而抛弃空格），手动或者命令行如下：

$ mkdir party_bid
$ cd party_bid

3.使用 Yeoman 创建一个 AngularJS 项目：

$ yo angular

之后会有提示如下：

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? (Y/n) 
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the Sass version of Bootstrap? (Y/n) 
[?] Which modules would you like to include? (Press <space> to select)
❯⬢ angular-animate.js
 ⬢ angular-cookies.js
 ⬢ angular-resource.js
 ⬢ angular-route.js
 ⬢ angular-sanitize.js
 ⬢ angular-touch.js

上面列出了是否需要在 AngularJS 直接添加一些拓展组建，在此全选，主要理由如下：

由于目前还不是对 Sass 和 Bootstrap 特别了解，以优先保证可用性为前提；
Party Bid 为开发项目而不是真正的商业 Web App ，不需要对应用大小最简化来保证用户体验；
即便现在的需求中用不到 Sass ，但在 Sass 本身也能使用纯 css ，之后也可以需要对应用进行 Sass 重构。

全部选择后结果显示如下：

[?] Would you like to use Sass (with Compass)? Yes
[?] Would you like to include Bootstrap? Yes
[?] Would you like to use the Sass version of Bootstrap? Yes
[?] Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js

注：上述代码可能会随着平台差异和程序版本而不同，请以自己的实际情况为准。

接下来可能生成的过程会比较漫长，在这段休息时间中可以看看本博客的其他内容 ^o

在 AngularJS 项目生成完毕后（要确定终端中是生成完毕停止而不是报错停止的 =_=||），就会发现当前目录中多了很多文件和文件夹：

app -- 应用的主文件夹，写代码的地方
test -- 放置测试文件的文件夹
node_modules -- Nodejs 安装的程序包
bower.json -- Bower 的依赖配置文件
Gruntfile.js -- Grunt 的配置文件
package.json -- NodeJS 的依赖配置文件

4.在终端中开启 Grunt 的内置服务器：

$ grunt serve

注意：grunt serve 和 grunt server 都能开启服务器，但是 grunt server 已经不被推荐使用。目前的情况是使用 grunt server 会被重定向到 grunt serve ，所以功能上没有任何区别。

接着 grunt 会自动在浏览器中打开 app 文件夹中的 index.html 页面，如果能够正常现实内容及样式的话说明我们这个环节已经成功了。

配置项目

虽然已经建立了一个 AngularJS 的模板项目，但是我们的命令行操作还并没有结束。

或者说，Yo 的强大功能还远不仅仅如此。本文仅讲解所用到的功能，拓展内容具体可参考 Yeoman 之搭建 AngularJS 开发环境(待写)。

AngularJS 中，路由是一个核心功能，用来响应 url 并连接对应的 view 和 controller。关于 MVC 的更多内容可以参考 AngularJS 之 MVC 架构开发介绍(待写)。

在有 Yo 的情况下，我们无需自己添加每一个 view 和 controller 。在第一张卡片中，我们需要用到三个页面："活动列表" ， "活动报名" 和 "创建活动" ，为此，我们在终端中继续输入如下命令：（因为当前正在运行服务器，故可以使用 "Command + N"（Mac）或 "Ctrl + N" 来创建一个新窗口，并再次回到当前文件夹）

$ yo angular:route ActivityList
$ yo angular:route ActivityRegister
$ yo angular:route CreateActivity

这样就直接创建了 app/scripts/controllers/ 文件夹下的 activitylist.js , activityregister.js 和 createactivity.js 三个 controller 文件，以及 app/views/ 下的 activitylist.html , activityregister.html 和 createactivity.html 三个 view 文件，并且已经在 app/scripts/ 下的 app.js 中将模板和控制器相互关联起来了，十分简单粗暴。

不论在上面的命令中使用 PascalCase 还是 camelCase ，文件名都会自动使用小写，但是 controller 的名称和路由中配置的路径会按照上面命令中给出的大小写来生成。

为了代码的可读性和可维护性，我们再新建一个 app/scripts/models 文件夹，并在其中添加一个 activity.js 文件用于处理一切与 activity 相关的数据操作。

特别注意，自己添加文件后也要在 index.html 中添加相应的引用。

...
<#script src='scripts/models/activity.js'></#script>
...

博文中禁止 script 标签，请自行去掉#号。

引用添加的位置不要在它默认生成的脚本块中，放在它的注释块外面。另外 activity.js 中的代码模式为：

function Activity(parameter) {
  //Do something
}

Activity.prototype.someMethod = function () {
  //Do something
};

Activity.anotherMethod = function () {
  //Do something
};

上面的代码中，采用面向对象的方式，依次是 类的构造函数，类的实例函数 以及 类函数。

数据结构设计

首先分析数据结构，为了保证良好的可读性和可拓展性，采用 对象数组 的形式来在 locolStorage 中存储活动。如果之后改用数据库存储的话，这样也是最方便对接的。

在 activity.js 的主要代码如下：

1.构造函数

function Activity(name, createdAt) {
    this.name = name;
    this.createdAt = createdAt;
}

在上面的代码中， Activity 类的对象具有两个字段(可能有些语言一般用属性，效果都是差不多的)，其中，createdAt 用于记录活动创建时间，以便于排序。

注意：因为采用对象数组，虽然其本身的物理存储数据已经可以实现对活动的排序，但是物理存储顺序是绝对不足以作为排序依据的，其具有非常明显的不可靠性。即便不存储创建时间，也需要指定一个 index 属性来支持排序功能。除此之外，也能使用哈希表来作为数据结构，以 index 作为索引，这里不作过多介绍。

2.读取函数

此博客已弃，请转至此处

因为不针对任何实例，所以此处采用类函数（方法）实现，从 localStorage 中取出相应 json 数组并解析为对象。

Activity.all = function () {
    return JSON.parse(localStorage.getItem('activities')) || [];
};

上面的代码中，最后的逻辑或操作是为了防止没有任何数据时导致程序崩溃，因此返回一个空数组而不是 undefined 。而当非空时，由于逻辑运算的短路法则，或运算及其后内容会直接被忽略。

3.存储函数

为了保持面向对象的纯洁性，此处采用实例函数而非类函数来进行存储，存储在浏览器本地的 localStorage 中。

Activity.prototype.save = function () {
    var list = Activity.all();
    list.push(this);
    localStorage.setItem('activities', list);
};

无活动时跳转

在卡片一中，存在如下需求：

在打开程序后判断一下，是否已经存在已创建的活动，如果没有，就要显示“创建活动”页面，引导用户去创建一个活动。

所以，我们需要在 controller 中增加相应的判断。

首先，我们来看看现在的路由配置，打开 app.js，部分代码如下:

angular
  .module('partyBidApp', [
  ...
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      ...
      .when('/ActivityList', {
        templateUrl: 'views/activitylist.html',
        controller: 'ActivitylistCtrl'
      })
      .when('/CreateActivity', {
        templateUrl: 'views/createactivity.html',
        controller: 'CreateactivityCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

可以看出，目前的默认页面为 views/main.html，对应的控制器为 MainCtrl。

为此，我们需要在 activity.js 和 main.js 中添加一些代码：

activity.js:

Activity.exist = function () {
    return (Activity.all()).length == 0;
};

在 model 中增加这个函数用于判断活动列表是否为空。

main.js:

angular.module('partyBidApp')
  .controller('MainCtrl', function ($scope, $location) {
    $scope.initiate = function () {
      var path = Activity.exist()? '/ActivityList': '/CreateActivity';
      $location.path(path);
    };
    
    $scope.initiate();
  });

上面的 controller 中的代码，虽然只有 2 行（甚至可以一行解决），但还是定义了一个 初始化函数 并调用。这是一种习惯，至于是不是好习惯现在还不能确定，只是随着代码量的增加我觉得这种方式能够使代码变得更加 neat 。另一个好处，现在还不能确定是否有用，就是在页面需要更新数据的时候可以直接（被）调用。

特别注意要在控制器的定义函数参数中添加 $location ，当然，实际上除了 $location.path() 外，还有别的页面跳转方法，比如最简单的 href 或者 AngularJS 的 ng-href 等，此处不做介绍。

接着运行 grunt serve ，就能看到现在已经跳到了活动报名页面，虽然目前整个页面上就只有一行 "This is the CreateActivity view."

无活动时返回按钮不显示

在卡片一中，存在如下需求：

无已创建活动情况下，进入”创建活动“页面，”返回“按钮不显示。

AngularJS 中有一个便捷的设置 DOM 可见性的方式，ng-show 和 ng-hide ，用法上没有任何区别，只是效果相反。

注意：所有 ng-someThing 属性都是 AngularJS 中的指令（directive），如果继续深入学习的话读者可能之后会创建自己的指令。

首先要在 views/createactivity.html 中添加一个按钮，位置等样式以及 ng-click 事件由读者自行实现：

...
<button class='' ng-show='{ {activity_exist} }' ng-click=''>返回</button>
...

其中， { { } }（双层花括号，无空格，因格式问题无法直接打出。）是 AngularJS 的数据绑定语法，表示其值绑定到了 $scope.activity_exist 变量上。

为此，我们需要在 CreateactivityCtrl 中对其进行赋值（仅给出核心代码，下同）：

...
$scope.activity_exist = !Activity.exist();
...

运行应用，可以看到按钮不显示（这也叫可以看到么 -.-），因为我们还没有添加创建活动的功能，所以目前看不到按钮显示。

事实上在开发中，我们并不需要按照完整的流程进行测试，在 Jasmine 测试当中，可以直接使用 SpyOn() 来伪造类或对象。这里我们可以先手动创建活动：

...
var new_activity = new Activity('活动一', Date.parse(new Date()))；
new_activity.save();
...

将其添加到上面的判断代码之前即可手动创建活动，注意多次运行后将会有多个 活动一 。可在创建一次后删除该代码并重新运行，该活动将保留在 localStorage 中。

关于 Jasmine 测试的使用方法请参见：[2014-08-08-JavaScript之TDD开发简介](% post_url 2014-08-08-JavaScript之TDD开发简介 %})。

为了将按钮固定显示在左上角，读者应自行参看模板应用的 css 代码并对此应用进行相应的修改，本文不对 css 样式本身作过多讲解。

活动列表按时间排序

在卡片一中，存在如下需求：

打开程序后直接进入"活动列表"页面，列表显示为已创建活动。
"活动列表"页面按照时间顺序由新到旧排列活动，最后创建的活动显示在列表的最前。
点击活动列表中的“活动”查看活动信息。

这里明显一定要用到动态的数据绑定，当然这也是 AngularJS 最擅长的地方之一。

和之前的 ng-show 以及 ng-hide 相似，可以使用 ng-repeat 来绑定数组数据。

为此，在 activitylist.html 中添加一个列表控件（写 Xaml 的时候习惯把页面的东东都叫控件了，见谅），主要代码如下：

...
<ul class=''>
  <li ng-repeat='activity in activities | orderBy:"-createAt"'>
    <a ng-click='go_to_detail(activity.name)'>
      { {activity.name} }
    </a>
  </li>
</ul>
...

上面的代码中，ng-repeat 中的 activity in activities 将 <li> 列表绑定到了 $scope.activities 数组变量中，对于其中的每个元素生成一个 <li> ，并将其名称作为显示内容，每个活动的点击事件调用 $scope.go_to_detail 函数并将活动名称作为参数。 orderBy:"-createAt" 表示以每个活动的 createAt 属性作为排序依据，- 号表示由大到小。

对于 ng-repeat 中的 ng-click 事件，为了确定具体点击的内容，可以将当前元素的某个属性或者当前元素本身作为参数传递，另一种方法是将 $index 作为参数传递，其代表 ng-repeat 中该元素的位置（从0开始）。

与此对应的 ActivitylistCtrl 核心代码如下：

初始化活动列表：

...
$scope.activities = Activity.all();
...

活动名称点击事件：

...
$scope.go_to_detail = function (activity_name) {
  $location.path('/ActivityRegister/' + activity_name);
};
...

按照上面的函数代码运行，点击活动，然后，先自己试一试，真的试了么？好吧我相信你。

页面并没有发生任何变化。Why？因为我们在路由中并没有定义形如 /ActivityRegister/活动一 之类的路径，所以路由按照 .otherwise() 中的配置回到了 起始页面 ，进而在判断有无活动后重新进入到 活动列表页面 。

为此，我们需要返回到 app.js 中修改路由配置（记得原来看到有个人的博客里写的是路由器配置，当时就惊呆了，估计是懒得校稿，不过其实我也没校，如果发现低级错误记得和我说哦 ^o）。

将原有的 /ActivityRegister 的配置修改为：

...
.when('/ActivityRegister/:activityName', {
  templateUrl: 'views/activityregister.html',
  controller: 'ActivityregisterCtrl'
})
...

其中的冒号 : 表示 activityName 为参数（或者说变量），由于不存在脱离活动的报名，所以无需保留原有的无参数路径。

之后，在 ActivityregisterCtrl 中，我们就能够取出该参数：

angular.module('partyBidApp')
  .controller('ActivityregisterCtrl', function ($scope, $location, $routeParams) {
    $scope.this_activity = $routeParams.activityName;
  });

之所以给出完整代码是希望读者注意到除了 $location 外现在参数中又多了一个 $routeParams ，用于与路由参数相关的操作。

活动创建

在卡片一中，存在如下需求：

在“创建活动”页面，当输入框内信息为空时，“创建”按钮为灰色的不可点击状态；
创建的活动名称不能重复，如果名称重复，点击【创建】按钮，文本框下红字提示：“*活动名称重复”。页面不跳转。

和之前的数据绑定不同，这里要求创建按钮的可用性随着输入框的内容实时变化，而非进入页面时一次性载入。

这里介绍三种方法，ng-model , ng-change 和 $scope.$watch 。

1.ng-model

ng-model 相当于 ng-bind （也就是双花括号）的逆向使用，即以使用 ng-model 的控件作为数据源，其属性值中的变量作为数据绑定的对象。因此，我们可以直接通过数据绑定实现。

在 view 中，我们定义一个输入框和一个按钮：

...
<input ng-model='activity_name' placeholder="如：活动一"/>
...
<button ng-disabled='!activity_name' ng-click='create_activity'>创建</button>
...

上面的代码已经可以实现无输入时不可用，其中，Button 的 ng-disabled 属性绑定为输入框文本的取反值，由于无输入文本时其值为 undefined 类型，作为逻辑值时为假；反之，若有输入内容，其值为 string 类型，为逻辑真。

2.ng-change

第二种方法中的 ng-change 指令严格的说来并不像数据绑定，而是类似 ng-click 那样的事件绑定，只是事件的触发源不是点击操作，而是在每当该元素的 Value 发生变化的时候触发。

view 中：

...
<input ng-model='activity_name' ng-change='check_input' placeholder="如：活动一"/>
...
<button ng-disabled='no_create' ng-click='create_activity'>创建</button>
...

controller 中：

...
$scope.check_input = function () {
  $scope.no_create = !$scope.activity_name);
  //将红色警告取消显示
}
...

使用 ng-change 绑定了一个函数，虽然更为复杂但也能实现更多功能，比如在用户重新输入时把之前的提示活动名称重复给去掉。

3.$scope.$watch

$scope.$watch 的用法和 ng-change 非常相似，但作用范围不同。 ng-change 只能作用于 HTML 元素，而 $scope.$watch 可以用来监测 $scope 中的任何变量或函数的变化。（函数变化指其返回值改变）

在 controller 中，我们定义一个函数作为 $watch 的回调函数，具有三个参数：newValue, oldValue, scope。当然，因为有 scope 参数，实际上该函数也可以不在 controller 内定义。

function watch_callback(newValue, oldValue, scope) {
  scope.no_create = !scope.name_to_create;
  //将红色警告取消显示
};

接着在 controller 中执行 $scope.$watch 内容：

$scope.$watch('name_to_create', watch_callback, true);

其中，第一个参数为待监视变量或函数，可以传名称也可以传引用，即也可写成：

$scope.$watch($scope.name_to_create, watch_callback, true);

第二个参数为回调函数。

第三个函数为是否深度监视，适用于对象或者数组。如果不加或为 false 只监视其引用值是否发生改变，而不会监视其内部的元素或者属性是否发生改变。对于字符串变量而言，没有实质差异。

另外一个需求是名称不能重复，读者可根据前面的内容在 model 中添加一个 Activity.check_repeat(name) 方法来实现，并根据返回值修改警告框的 ng-show 或 ng-hide 属性值即可，此处不做过多介绍。

第一张卡片中主要用的技术和心得体会主要就是这些，如果有任何疑问欢迎在下方回复 ^.

本站地址： http://trotyl.github.io/

posted @ 2014-08-09 12:37 Trotyl 阅读(325) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

TrotylDE

本博客现与trotyl.github.io同步更新。直接使用markdown写作，若存在格式差异请以trotyl.github.io中为准。

PartyBid 学习笔记之第一张卡片总结

此博客已弃，请转至此处。

前情提要

建立项目

配置项目

数据结构设计

1.构造函数

2.读取函数

3.存储函数

无活动时跳转

无活动时返回按钮不显示

活动列表按时间排序

活动创建

1.ng-model

2.ng-change

3.$scope.$watch

公告

TrotylDE

本博客现与trotyl.github.io同步更新。直接使用markdown写作，若存在格式差异请以trotyl.github.io中为准。

PartyBid 学习笔记 之 第一张卡片总结

此博客已弃，请转至 此处 。

前情提要

建立项目

配置项目

数据结构设计

1.构造函数

2.读取函数

3.存储函数

无活动时跳转

无活动时返回按钮不显示

活动列表按时间排序

活动创建

1.ng-model

2.ng-change

3.$scope.$watch

公告

PartyBid 学习笔记之第一张卡片总结

此博客已弃，请转至此处。